使用媒体查询未显示图像

Posted 2023-03-06

【中文标题】使用媒体查询未显示图像

【英文标题】：Image not being displayed using Media Query

【发布时间】：2016-10-19 18:24:30

【问题描述】：

我正在为我的图像使用引导程序。当我使用visible-xs 和img-responsive 时，它会在浏览器中显示较小的图像。

但是，当我尝试使用 media query 加载更大的图像时，屏幕只是空白。

我已经检查了图像的位置，它就在那里。

谁能指出我正确的方向，为什么media query 没有显示更大的图像？

<div class="container">
<div id="my_img"><img id="pic" src="images/flower.jpg" class="img-responsive visible-xs"></div>
</div>

在 CSS 文件中

@media (min-width: 1200px) 
  #pic
    background:url('images/flower-1200.jpg') no-repeat;
      

【问题讨论】：

您是否应该将#my_img 的背景图像设置为#pic 标签在该分辨率下不可见？

【参考方案1】：

如果您使用visible-xs 类，那么根据Bootstrap Docs，它只会出现在超小屏幕中，隐藏在其余屏幕中。

如果您尝试加载新图像（使用background），那么您必须申请父级#my_img，因为它没有visible-xs 类。

@media (min-width: 1200px) 
  #my_img 
    background: url('//lorempixel.com/1600/900') no-repeat;
    height:900px;
    max-width:100%;
  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12">
      <div id="my_img">
        <img id="pic" src="//dummyimage.com/100x100" class="img-responsive visible-xs">
      </div>
    </div>
  </div>
</div>

【参考方案2】：

正如dippas 所提到的，由于visible-xs 类，您的#pic 图像在1200 像素处不可见，因此您需要设置#my_img 的背景图像。请务必在相关图片的 CSS 中提供适当的尺寸。

【讨论】：

@media (min-width: 1200px) #my-img background:url('images/flower-1200.jpg') 无重复； //还是不显示图片

@artist 看看我的 sn-p 可能对你有帮助

【参考方案3】：

我会说您的.css 文件很可能位于css 文件夹中。

如果是这种情况，您需要根据.css 文件的位置使用图像的相对位置。很可能是这样的：

background:url('../images/flower-1200.jpg') no-repeat;

【讨论】：

感谢大家在这里帮助我，我没有正确访问路径。它对我来说就像这样 background:url(../images/flower-1200.jpg) no-repeat;