Question

我有一个 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

Answer 1

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;
}

Answer 2

嗯，基本上我只是超越了自己；真正的问题是版本控制，我只是错过了几件事。主要帖子中的代码完全正常。

background-size: 100% 100% 上传后不起作用

2 个答案: