css3响应式图片

响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。

同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。

 

常用的实现方式：

1.用srcset和sizes加载不同图片

 

<img

     sizes="(min-width:40em) 80vw, 100vw"

     srcset="img/medium.jpg 375w,

                  img/large.jpg 480w,

                  img/extralarge.jpg 768w"

     src="img/medium.jpg"

     alt="响应式图片布局">

 

2.picture、source media加载不同图片

 

<picture>

     <source

          media="(min-width:40em) 80vw, 100vw"

          srcset="img/medium.jpg 375w,

                       img/large.jpg 480w,

                       img/extralarge.jpg 768w" />

     <img src="img/medium.jpg" alt="响应式图片布局"/>

</picture>

 

3.用source type指定多种格式

<picture>

     <source

          type="image/webp"

          media="(min-width:40em) 80vw, 100vw"

          srcset="img/medium.webp 375w,

                       img/large.webp 480w,

                       img/extralarge.webp 768w" />

     <source

          media="(min-width:40em) 80vw, 100vw"

           srcset="img/medium.jpg 375w,

                         img/large.jpg 480w,

                         img/extralarge.jpg 768w"/>

    <img src="img/medium.jpg" alt="响应式图片布局"/>

</picture>

4.超赞polyfill-picturefill  实现浏览器兼容

下载 picturefill.min.js