转载

HTML5响应式图片技术中文图解

一、本文内容干货量远不及之前的那篇

首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“ 响应式图片srcset全新释义sizes属性w描述符 ”一文。

提前说明下，本文的示意图片均来自： The anatomy of responsive images

我只是把上面的英文变成了中文，一些图片时候实时效果可以去原页面观摩。

另外，补充了一些遗漏的关于响应式图片处理的tips.

1. 作为背景图片，image-set()这厮

这个是我自己补充的，精力有限，我就不作图了，嘻嘻，使用示意如下(目前需要 -webkit- 私有前缀)：

.example {     background-image: -webkit-image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi ); }

兼容性如下：

2. 尺寸固定，密度变化

< img alt =” A cat “ width =” 320 “ height =” 213 “ src =” cat.jpg “ srcset =” cat-2x.jpg 2x, cat-3x.jpg 3x “> 固定尺寸，这里或CSS中作用是如果浏览器不支持 srcset就使用1倍图图片地址屏幕像素密度

这里出现了 srcset ，兼容性如下：

3. 尺寸和密度都变化

< img alt =” A red panda eating leaves “ src =” panda-689.jpg “ srcset =” panda-689.jpg 689w, panda-1378.jpg 1378w, panda-500.jpg 500w, panda-1000.jpg 1000w “ sizes =” (min-width: 1066px) 689px, (min-width: 800px) calc(75vw – 137px), (min-width: 530px) calc(100vw – 96px), 100vw “> 专门给不支持 srcset浏览器留的图片地址图片宽度数据窗体宽度条件匹配时候的图片宽度当没有条件匹配时候预留的退路

4. 尺寸，密度，资源都变化

< picture > < source media =” (max-width: 800px) “ srcset =” f1-focused-800.jpg 800w, f1-focused-1406.jpg 1406w “ sizes =” (min-width: 530px) calc(100vw – 96px), 100vw “> < img alt =” F1 car in the gravel “ src =” f1-689.jpg “ srcset =” f1-689.jpg 689w, f1-1378.jpg 1378w, f1-500.jpg 500w, f1-1000.jpg 1000w “ sizes =” (min-width: 1066px) 689px, calc(75vw – 137px) “> </ picture > 如果窗体匹配该查询，这是这些去确定src …否则使用这些