对无法正常工作的图像使用媒体查询

Question

在我的项目中，我将背景设置为我选择的图像。

代码在这里：

<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%。对此进行测试时，我的图像没有重新适应页面，而是向内拉伸，对图像造成可怕的影响。

这是我的媒体查询代码：

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

Answer 1

如果您希望图像在 100% 宽度上拉伸时不难看

你可以使用 object-fit 属性

例如：

img{
    width: //blabla
    height: //blabla
    object-fit:cover;
}

此外，如果您使用媒体查询来更改屏幕宽度，则不应在内联样式中定义宽度和高度，我相信您知道什么是内联样式:d <3

更新： 请注意，object-fit 属性用于 img 标签，但是如果您打算使用 <img> 标签来设置背景，那么您应该使用 <div> 而不是 background-image:url('/images/someimage.png') 属性因为 div 有更有效的方法来处理背景图像。勾选link左边的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 属性的信息，请查看 this link

Answer 2

首先，你给了它内联代码，内联代码比外部代码更强大，所以你的媒体查询代码将不起作用

<div id="test" style="width: 100%; height: 100px; background-color: red;"></div>

并且在 css 您提供的文件中

@media screen and (max-width:700px){
  #test {
    background-color: black;
  }
}

所有屏幕尺寸的结果都是红色背景，因为内联代码比外部代码强。尝试像这样将内联代码传输到 CSS 文件

#test {
  width: 100%; 
  height: 100px; 
  background-color: red;
}
@media screen and (max-width:700px){
  #test {
    background-color: black;
  }
}

对无法正常工作的图像使用媒体查询

Using media query for an image not working correctly

html

css

media-queries