如何解决background-size: 100% 100% 上传后不起作用
我有一个 Django 站点,当我在本地机器上运行它时一切正常,但是当我访问 pythonanywhere.com 时出现一个小问题:不知何故我的背景图片不想填满整个即使它在我的本地主机上运行(使用相同的浏览器,所以问题不在这里)。基本上我不介意改变纵横比,我只是想让背景的每个像素完全在屏幕上,是 600x400 还是 200x2000。
body {
background: url("images/classes.jpg") no-repeat center center fixed;
background-size: 100% 100%;
}
在我看来,{background-size: 100% 100%}
只是...不起作用?
我试图将百分比切换为 100vw 100vh
,但输出实际上是一样的。
页面本身:http://seltsamermann.pythonanywhere.com/classes/
图片本身:https://i.ibb.co/0G86wL2/classes.jpg
我想知道可能是什么问题。
(以防万一可能会有所帮助)
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/templates/main/classes.html
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/static/main/style_classes.css
解决方法
object-fit CSS 属性设置被替换元素(例如 <img>
或 <video>
)的内容应如何调整大小以适合其容器。将此属性用于 css 中的图像或存储该图像的容器。
object-fit: cover;
更多:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
试试这个:
body {
background: url("") no-repeat center center fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
,
嗯,基本上我只是超越了自己;真正的问题是版本控制,我只是错过了几件事。主要帖子中的代码完全正常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。