响应式图片

[semi-xi]

响应式图片

以前，提起响应式图片的时候，很多时候后会想到用js或者css去处理，这里需要人去写大量的判断逻辑，把工作量交给了人，这样会感觉比较的麻烦。最近看到一个关于img-strset的问题，可以说是一个比较新潮的办法解决图片相应问题他是把判断逻辑交给了浏览器去做。

方法有可以下面的几个

1. css 样式 image-set
2. picture 标签
3. img 标签的 srcset

   css样式 image-set

   兼容性

从图可以看到，兼容想当的糟糕，ie全部都不兼容，火狐也不兼容，谷歌的话需要带前缀 -webkit-

使用方法

    cssName{
        background-image:url(xxxx/105-160.png);/* 1x */
        background-image: -webkit-image-set(
        url(xxx/-105-160.png) 1x,
        urlxxx/210-320.png) 2x);/* Retina */
    }

图片里面的这个1x跟2x代表的是图片的尺寸，同时也是像素比的意思，浏览器会根据不同的像素比选择不同的图片，同时会选择当前像素比最高的质量的图片来加载。例如，如果像素比是1.5的话，像上面代码这样的话就会选择2x来加载，因为选择用1x的话会出现图片的失真问题。 第1行样式代表的是一个默认的样式，也表示如果浏览器不支持image-set的时候的一个解决方案，后面的样式是利用浏览器的对样式支持实现的一个响应式图片兼容。

picture 标签

兼容性

从图可以看到，兼容也是非常的不理想，在移动端也没法做到很好的兼容

使用方法

    <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>