在我的元素中，我将背景设置为我选择的图像。
代码在这里:
<body>
<img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>
然后我在 CSS 中使用媒体查询。一般来说，我对这些查询和开发很陌生，所以如果我做错了什么或效率低下，请告诉我。
我的查询基本上是说如果页面宽度为 700 像素或更小，请将图像宽度设置为 100%。对此进行测试时，我的图像不会重新适应页面，而是向内拉伸(stretch)，从而对图像造成可怕的影响。
这是我的媒体查询代码:
@media screen and (max-width: 700px) {
.backgroundimg {
width: 100%;
}
}
有人知道为什么这不起作用吗？谢谢。
更新:
CSS
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
object-fit:cover;
}
HTML
<div class="mydiv">
Placeholder
</div>
此代码无法正常工作。我的背景功能与图像标签完全相同，这次是使用 div。
更新 2: 此代码未按预期将图像的宽度和高度设置为页面的 100%。
HTML
<img class="bgimage"src="{% static 'spotifywallpaper.jpg' %}" alt="">
CSS
.bgimage {
width: 100%;
height: 100%;
object-fit:cover;
}
最佳答案
如果你希望图像在 100% 宽度上拉伸(stretch)时不难看
你可以使用object-fit属性
例如:
img{
width: //blabla
height: //blabla
object-fit:cover;
}
此外，如果您使用媒体查询来更改屏幕宽度，您不应该在内联样式中定义宽度和高度，我相信您知道内联样式是什么 :d <3
更新:
注意 object-fit属性用于 img 标签，但如果您要使用 <img> 设置背景标记这是不好的做法，你应该使用 <div>而不是 background-image:url('/images/someimage.png')属性，因为 div 有更有效的方法来处理背景图像。
检查this在提到的链接的左侧，有 background properties 的列表
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
background-size:cover;
}
<div class="mydiv">
Placeholder
</div>
了解更多 background-size属性(property)结账this link
关于html - 对无法正常工作的图像使用媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58756289/