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

2024-05-21 • 问答

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

该代码在这里：

<body>
    <img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>

然后我在CSS中使用媒体查询。我通常对这些查询和开发都是陌生的，所以请告诉我是做错了还是效率低下。

我的查询基本上说，如果页面的宽度为700px或更小，则将图像宽度设置为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>

此代码无法正常工作。我的背景功能与image标签完全相同，这次是div。

更新2： 此代码未按预期将图像的宽度和高度设置为页面的100％。

HTML

<img class="bgimage"src="{% static 'spotifywallpaper.jpg' %}" alt="">

CSS

.bgimage {
    width: 100%;
    height: 100%;
    object-fit:cover;
}

如果您希望图像在100％的宽度上伸展时不难看到

您可以使用object-fit属性

例如：

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

此外，如果您使用媒体查询来更改屏幕更改的宽度，则不应以内联样式定义宽度和高度，并且我相信您知道什么是内联样式：d

更新：请注意，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属性检出this link

的更多信息 ,

首先，您为其提供了内联代码，内联代码比外部代码更强大，因此您的媒体查询代码将无法工作

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

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

yishan1987 回答：对图像使用媒体查询无法正常工作

大家都在问