html - 仅加载将与响应式布局一起使用的图像

Question

我想利用 Bootstrap 3 的响应式实用程序根据所用设备的大小仅加载特定图像:

<img src="http://bit.ly/12VMi5H" class="img-thumbnail visible-lg .hidden-print">
<img src="http://dell.to/12VMrWX" class="img-thumbnail visible-md .hidden-print">
<img src="http://bit.ly/12VMu55" class="img-thumbnail visible-sm .visible-print">

但是，我不想加载所有 3 个图像。我怎样才能通过 CSS 或其他一些轻量级方式只加载适合该设备和屏幕尺寸的图像？

Answer 1

如果您通过 CSS 加载图像作为背景图像，您可以控制通过适当的媒体查询加载哪些 Assets 。与 HTML 不同，通过 CSS 加载图像只会根据视口(viewport)加载适当的图像。您可以在每个断点处分配特定的背景图像。下面是一个基于 BS 3.0 的例子。

HTML:

   <div class="image-holder></div>

CSS:

@media (min-width: 768px) {

  .image-holder {
  background: #fff url(http://bit.ly/12VMu55) no-repeat ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
}

@media (min-width: 992px) {

  .image-holder {
  background: #fff url(http://dell.to/12VMrWX) no-repeat ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
}

@media (min-width: 1200px) {

  .image-holder {
  background: #fff url(http://bit.ly/12VMu55) no-repeat ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
}

如果您想要另一个尺寸的图像只用于移动设备，请将其放入 css 的主体中，因为 BS 是移动优先的。