Question

我的页面顶部有一个标题，其中有两个图像，其中一个仅在视口较大（> 940）时可见，另一个仅在移动设备上显示。为了实现这种行为，我使用了Bootstrap 3及其定义的媒体查询集：

<header class="container">
   <div class="row">

      <div class="col-lg-4 hidden-xs">
        <img src="img/hi-res-logo.png">
      </div>

      <div class="col-xs-12 visible-xs">
        <img src="img/small-logo.png">
      </div>

  </div>
</header>

到目前为止，没什么大不了的，前面的代码做得很好，但我想要的是防止大图像文件本身在移动设备上的负载，以避免不必要的数据消耗......那么如何实现呢？

Answer 1

将图像设置为背景并在CSS中使用媒体查询。

<div class="container">
    <div class="row">
         <div class="col-lg-4" id="my-div"></div>
    </div>
</div>

CSS

@media (max-width: 700px) {
    #my-div {
        background-image: url('img/small-logo.png');
    }
}
@media (min-width: 700px) {
    #my-div {
        background-image: url('img/hi-res-logo.png');
    }
}

Answer 2

**I think it is better to use single media query in this case.**   
#my-div {
    background-image: url('img/hi-res-logo.png.png');
    width: 100px; /*image width - please change as per your image*/
    height: 100px; /*image height - please change as per your image*/
}
@media (min-width: 700px) {
   #my-div {
       background-image: url('img/small-logo.png');
       width: 200px; /*image width - please change as per your image*/
       height: 200px; /*image height - please change as per your image*/
   }
}

仅以特定分辨率加载图像

2 个答案: