使用Media Query无法显示图像

时间:2016-06-17 20:07:59

标签: html5 twitter-bootstrap css3 twitter-bootstrap-3 media-queries

我正在为我的图片使用bootstrap。当我使用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;
  }    
}

3 个答案:

答案 0 :(得分:4)

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

SS

如果您尝试加载新图片(使用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>

答案 1 :(得分:2)

如上所述dippas,由于#pic课程,您的visible-xs图片无法在1200px上看到,因此您需要设置#my_img的背景图片。请务必在相关图片的CSS中提供适当的尺寸。

答案 2 :(得分:1)

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

如果是这种情况,您需要根据.css文件的位置使用图像的相对位置。最有可能的是:

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