我想利用 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 或其他一些轻量级方式只加载适合该设备和屏幕尺寸的图像?
最佳答案
如果您通过 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 是移动优先的。
关于html - 仅加载将与响应式布局一起使用的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23637787/