响应式图片

响应式布局示意图

为适配不同终端机型的屏幕宽度和像素密度，一般会使用如下方法设置图片的 CSS 样式：

将图片的最大宽度设置为 100%，以确保图像不会超出其父级元素的宽度，如果父级元素的宽度发生改变，图片的宽度也随之改变，height：auto 可以确保图片的宽度发生改变时，图片的高度会依据自身的宽高比例进行缩放。
这样当我们在移动设备上访问响应式网页里的图片时，只是把图片的分辨率做了缩放，下载的还是 PC 端的那张大图，这样不仅浪费流量，而且浪费带宽，而且会拖慢网页的打开速度，严重影响用户的使用体验。

---

我们可以使用两个新的属性——srcset和sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。所以，有了这些属性，浏览器会：查看设备宽度检查 sizes 列表中哪个媒体条件是第一个为真查看给予该媒体查询的槽大小加载 srcset 列表中引用的最接近所选的槽大小的图像

注意格式要对：每一行都有不同的属性值，每个属性值之间都有逗号分隔。srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。sizes定义了一组媒体条件（屏幕的宽度），以上边为例，当屏幕的宽度小于480px的时候，图像将填充的槽的宽度是440px。

新的解决方案：

---

是 HTML5 的一个新元素；
如果元素与当前的

的工作原理

• 元素

标签它本身没有属性。神奇的地方是 被用来当做的容器。
元素，是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加：

• srcset (必需)

接受单一的图片文件路径 (如：srcset=”img/minpic.png”).
或者是逗号分隔的用像素密度描述的图片路径 (如：srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默认不使用的。

• media (可选)

接受任何验证的 media query, 你可以看到在 CSS @media 选择器 (如：media=”(min-width: 320px)”).
在之前的语法的例子里已经用到了。

• sizes（可选）

接收单一的宽度描述 (如：sizes=”100vw”) 或者单一的 media query 宽度描述 (如：sizes=”(min-width: 320px) 100vw”).
或者逗号分隔的 media query 对宽度的描述 (如：sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一个被当做默认的。

• type(可选)

接受支持的 MIME 类型 (如: type=”image/webp” or type=”image/vnd.ms-photo”)
浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的元素并忽略掉后面的标签。

• 添加最后的元素

元素在内部用来当浏览器不支持时或者没有源标签匹配时的显示。在 内使用标签是必须得，如果你忘记了，将不会有图片显示出来。
用来声明默认的图片显示。将标签放到内的最后，浏览器在找到标签之前会忽略的声明。这个图片标签也需要你写上它的 alt 属性。
参考HTML5 中的 picture 元素响应式处理图片