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. 尺寸固定，密度变化 .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倍图@H_304_21@图片地址屏幕像素密度

这里出现了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浏览器留的@H_742_126@图片地址图片宽度数据窗体宽度条件匹配时候的图片宽度当没有条件匹配时候预留的退路

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> @H_930_360@source tyPE=”image/webp“ srcset=”snow.webp“> img alt=”Hut in the snow“ src=”snow.jpg“> /picture> 如果这种类型支持， 使用这个…否则这个

二、直接结语

本文主要图解了几种HTML侧的响应式图片的用法说明，希望可以对移动端同学的学习有所帮助。

以上~

最后，祝大家今天能遇到如下图所示的好事情！

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！