背景大小: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;
}

嗯,基本上我只是超越了自己;真正的问题是版本控制,我只是错过了一些东西。主帖子中的代码工作得很好。

最新更新