黑马程序员技术交流社区

标题: HTML5响应式图片技术中文图解 [打印本页]

---

作者: 月亮是我掰弯的    时间: 2017-2-28 15:57
标题: HTML5响应式图片技术中文图解

原文：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…否则使用这些

5. 不同的图片类别

<picture>  <source type=”image/webp“ srcset=”snow.webp“>  <img alt=”Hut in the snow“ src=”snow.jpg“></picture>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2