仅以特定分辨率加载图像

Question

我的页面顶部有一个 header，其中有两张图片，其中一张仅在视口较大（> 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*/
   }
}

仅以特定分辨率加载图像

Load images only in certains resolutions

html

javascript

css

image

responsive-design