图片的响应式实现

一、背景图片响应式实现

1、为了适配 Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：

.mod .hd h3 {background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */}

/* ------------- Retina ------------- */

@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */

       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */

       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */

       only screen and (min-resolution: 240dpi), /* 标准 */

       only screen and (min-resolution: 2dppx) /* 标准 */{

　　.mod .hd h3{

   　　 background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);

   　　 background-size: 105px 155px;

　　}

}

2、使用image-set

显而易见，通过 Media Queries 来实现「响应式图片」还是很麻烦，CSS 代码的可维护性不高，有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片，值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */

background-image: -webkit-image-set(

    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,

    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

二、普通图片的响应式实现

CSS「image-set」 解决了背景图片的响应式问题，但是 HTML中的 img 元素怎么办呢？

1、 @brucel的解决草案

2011年11月 @brucel 提出了HTML5 的一个解决草案：

<picture>

    <source src="landscape.webp" type="image/webp" media="screen and (min-width: 20em) and (orientation: landscape)" />

    <source src="landscape.jpg" type="image/jpg" media="screen and (min-width: 20em) and (orientation: landscape)" />

    <source src="portrait.webp" type="image/webp" media="screen and (max-width: 20em) and (orientation: portrait)" />

    <source src="portrait.jpg" type="image/jpg" media="screen and (max-width: 20em) and (orientation: portrait)" />

　　<!-- 不支持的浏览器降级处理 -->

　　<img src="fallback.jpg" alt="fancy pants"> 
</picture>

2、使用新的srcset属性

W3C 社区讨论组 Responsive Images Community Group  应运而生。最新的规范在这里：http://picture.responsiveimages.org/ （W3C http://www.w3.org/TR/html-picture-element/）。截止本文发布时间，最近一次更新是 2013年4月24日，规范示例：

<picture width="500" height="500">

　　<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

　　<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

　　<source srcset="small-1.jpg 1x, small-2.jpg 2x">

　　<img src="small-1.jpg" alt="">

　　<p>Accessible text</p>

</picture>

注明：srcset还适用于video，audio标签，如：

<video>

    <source src="video.mp4" type="video/mp4" />

    <source src="video.webm" type="video/webm" />

    <source src="video.ogv" type="video/ogg" />

    <img src="fallback.jpg" alt="fancy pants" />

    <!-- fallback.jpg is *always* downloaded -->

</video>

参考：

• How To Avoid Duplicate Downloads In Responsive Images
• CSS 与 HTML5 响应式图片