使用纯 CSS 实现响应式的图片显示效果

浏览数：19 / 时间：2015年06月09日

　　有许多方法可以实现页面里图像的响应式显示（Responsive）。然而，我碰到的所有方案都使用了 JavaScript。这使我疑惑不用 JavaScript 实现图像响应是否可行。

　　我提出了下面纯CSS的方案。

　　它是如何工作的呢？

我把<img>标签防止在内。src属性将从服务器获得手机版本的图像。接着我还在元素内部包含了一点CSS。

　　什么？？HTML文档中能嵌入了CSS?

是的，只要你增加了scoped属性，这就在HTML5里就是非常有效的。在这个CSS里，我从某个断点开始用了@media查询把作为背景的高清图像添加到里。在下面这段代码里，我只添加了一个断点，然而你当然可以按你喜欢的增加许多。

通过使用背景图像指示符，只有在需要的时候才会从服务器获取这个图像。也就是说，只有在media查询满足的时候才能获取到。<img>将确保有正确的高宽比，这样上的背景图像才能得到正确的现实。

　　代码展示

　　下面是可以运行的所有代码。

　　HTML

　　首先看HTML。

<span 
class="magik-responsive-image" 
id="image-01">
<img 
src="http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" 
alt="TODO">
<style 
scoped>
@media screen and (min-width: 701px){#image-01{background-image:url(http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}}
</style>
</span>

　　CSS 我们还需要对CSS最一点修改，以便在应当显示高清图像的时候隐藏低清晰度的图像。技巧是增加backgroud-size:100%;这使得在维护高宽比不变的情况下伸展背景。

  
    
    .magik-responsive-image {
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: relative;
}
 
.magik-responsive-image img {
max-width: 100%;
}
 
@media screen 
and (min-width: 701px) {
 
.magik-responsive-image img{
opacity: 0;
}
}