响应式图片的几种解决方案

在目前的前端开发中，我们经常需要进行响应式的网站开发。提起响应式，大家应该想到三个概念： 弹性布局， 弹性图片， 媒体查询。

本文着重介绍一下弹性图片，也就是响应式图片的解决方案。

A. js和服务端控制

$(function(){
    function makeImageResponsive(){
        var img = $('.cotent img');
        var width = $(window).width();
        if(width <= 480){
            img.attr('src', '480.png');
        }else if(width <= 800){
            img.attr('src', '800.png');
        }else{
            img.attr('src', '1600.png');
        }
    }
    $(window).on('resize load', makeImageResponsive);
})

B. srcset属性

现在HTML5中对于img标签新增了一个srcset属性。
属性值为以逗号分隔的一个或多个字符串。每个字符串由以下组成：
a. 一个图像的URL。
b. 可选的， 空格后跟以下的其中一个

~ 一个宽度描述符，后面紧跟’w’符号。
~ 一个像素描述符，后面紧跟’x’符号。

当然这个属性可以配合sizes属性结合使用。

sizes属性可以设置一些类似媒体查询的规则。
例如：

sizes=’(max-width:300px) 200px, 400px’

这表示，如果满足小于300px的时候，图片宽度为200px，否则宽度为400px。
当然，这里用可以使用’x’ ‘calc’, ‘vw’等符号。

C. picture属性。

这个也是HTML5的新属性。
可以放置多个source标签，以指定不同的图像文件名，进而根据不同的条件进行加载。

用法：

• 创建标签。
• 里面放置标签用来展示可能用到的图像
• 对source添加srcset属性来指定图片URL，添加media属性，来规定媒体查询。
• 添加一个回退的元素

这个例子表示在大于800px的时候，展示ad002-l这个large图片。
在大于480px的时候，展示ad002-m这个medium图片。
否则，展示ad002小图片。

<picture>
    <source srcset='src/img/ad002-l.png' media='(min-width: 50em)'/>
    <source srcset='src/img/ad002-m.png' media='(min-width: 30em)'/>
    <img src="src/img/ad002.png"/>
</picture>

现在很多浏览器对于picture这个标签还不支持，所以我们需要用到picturefill.js来解决。

D. svg图片

SVG图片不是一个简单的图像，而是一个规则。所以可是很好的响应式，不过因为比较复杂，所以一般都是对于一些简单的图像使用svg，对于复杂，颜色多的图片，不采用SVG。