图像未使用媒体查询显示

Question

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

Answer 1

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

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

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

Answer 2

我会说你的 .css 文件很可能在 css 文件夹中。

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

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

Answer 3

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

图像未使用媒体查询显示

Image not being displayed using Media Query

html

css

media-queries

twitter-bootstrap

twitter-bootstrap-3