&nbs p;
一、本文内容干货量远不及之前的那篇
首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“响应式图片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. 尺寸固定，密度变化 .svg-exp{position:relative;max-width:600px;}.svg-exp p{padding:0;margin:0;}.svg-exp svg{position:absolute;width:100%;height:100%;top:0; left:0;}.img-d-1 .st0{fill:#5F6464;} .img-d-1 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-1 .st2{font-size:26.9775px;} .img-d-1 .st3{fill:#C92C2C;} .img-d-1 .st4{fill:#309D47;} .img-d-1 .st5{fill:#1990B8;} .img-d-1 .st6{font-family:'方正静蕾简体', 'microsoft yahei';} .img-d-1 .st7{font-size:24px;} .img-d-1 .st8{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-1 .st9{fill:#ED1F24;} .img-d-1 .st10{fill:none;} .img-d-1 .st11{font-size:24px;} .img-d-1 .st12{font-size:24px;}.entry p > strong{display:block; padding:10px;background:#f0f3f9;}
< 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 -d-2 .st0{fill: # 5F6464;} .img-d-2 .st1{font-f ami ly:Inconsolata; font-weight : bold;} .img-d-2 .st2{font- Size: 25. 777 2px;} .img-d-2 .st3{fill:#C92C2C;} .img-d-2 .st4{fill:#309D47;} .img-d-2 .st5{fill:#1990B8; wh IT e -s pace: PR e;} .img-d-2 .st6{fill:#309D48;} .img-d-2 .st7{fill:none;} .img-d-2 .st8{font-f am ily:'方正静蕾 简体 ', 'microsoft yah ei ';} .img-d-2 .st9{font-size:24px;} .img-d-2 .st10{fill:none; stroke :#ED1 f2 4;stroke-width:3;stroke-miterlimit:10;} .img-d-2 .st11{fill:#ED1F24;}
< 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浏览器留的 @H_366_ 126 @ 图片地址 图片 宽 度数据 窗体宽度 条件匹配时候 的图片宽度 当没有条件匹配 时候预留的退路
4. 尺寸，密度，资 源 都变化
.img-d-3 .st0{fill:#5F6464; white-space: pre;} .img-d-3 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-3 .st2{font-size:24.2164px;} .img-d-3 .st3{fill:#C92C2C;} .img-d-3 .st4{fill:#309D47;} .img-d-3 .st5{fill:#1990B8; white-space: pre;} .img-d-3 .st6{fill:none;} .img-d-3 .st7{font-family:'方正静蕾简体', 'microsoft yahei';} .img-d-3 .st8{font-size:24px;} .img-d-3 .st9{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-3 .st10{fill:#ED1F24;}
< picture > < source media =” (max-width: 800px) “ srcset =” F1 -focused-800.jpg 800w, f1-focused-1 406 .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. 不同的图片类别
.img-d-4 .st0{fill:#5F6464; white-space: pre;} .img-d-4 .st1{font-family:Inconsolata; font-weight: bold;} .img-d-4 .st2{font-size:25.7851px;} .img-d-4 .st3{fill:#C92C2C;} .img-d-4 .st4{fill:#309D47;} .img-d-4 .st5{fill:#1990B8;} .img-d-4 .st6{fill:none;} .img-d-4 .st7{font-family:'方正静蕾简体', 'microsoft yahei';} .img-d-4 .st8{font-size:24px;} .img-d-4 .st9{fill:none;stroke:#ED1F24;stroke-width:3;stroke-miterlimit:10;} .img-d-4 .st10{fill:#ED1F24;}
< picture > < @H_772_ 360 @source ty PE =” image/webp “ srcset =” snow.webp “> < img alt =” Hut in the snow “ src =” snow.jpg “> </ picture > 如果这种类型支持， 使用这个 …否则这个
二、直接结语
本文主要 图解 了 几种 HTML 侧的响应式图片的用法说明，希望可以对移动端 同学 的学习有所帮助。
以上~
最后，祝大家今天能遇到如下图所示的好事情！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5响应式图片技术中文图解 全部内容，希望文章能够帮你解决 html5教程-HTML5响应式图片技术中文图解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5响应式图片技术中文图解的详细内容...