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

这篇文章发布于 2015年11月6日，星期五，00:40，归类于 CSS相关。 阅读 48905 次, 今日 3 次 8 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=5045

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

首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“响应式图片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…否则使用这些

5. 不同的图片类别

<picture> <source type=”image/webp“ srcset=”snow.webp“> <img alt=”Hut in the snow“ src=”snow.jpg“></picture>如果这种类型支持， 使用这个…否则这个

二、直接结语

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

以上~

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

摸胸部

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=5045

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , ,


发表评论（目前8 条评论）

  1. chess99说道：
    2019年10月16日 16:26

    张大大 页面上新增的广告别让他会动啊 干扰注意力lol

    回复
  2. 好东西，我收藏了哈说道：
    2017年07月7日 15:30

    谢谢，你的内容对我很有帮助，最后的那张图片来源是哪里的啊

    回复
  3. Asiaidc.net说道：
    2015年11月17日 10:08

    学习中,有时间再认真研读下博主《响应式图片srcset全新释义sizes属性w描述符》一文.

    回复
  4. DeadFire说道：
    2015年11月17日 09:40

    文章中svg图片是怎么实现的？纯手写的么？

    回复
  5. risker说道：
    2015年11月12日 10:52

    这是之前翻译的这篇文章，欢迎大家指正。里面还有自己的一些理解和demo。

    https://github.com/riskers/blog/issues/5

    回复
  6. mantou说道：
    2015年11月6日 22:43

    新 w 描述的不就是 对于 设备 像素么。

    1x 的显示器 显示 340px 图片 使用的设备像素就是 340（w） 所以是 512px的图、

    1x 的显示器 显示 128px 图片 使用的设备像素就是256 （w）所以是 256px的图、

    问题是显示chrome怎么总是显示 512 ？？？ 又改了方式？
    http://www.zhangxinxu.com/study/201410/srcset-sizes.html

    回复
  7. 不二很纯洁说道：
    2015年11月6日 11:11

    棒棒哒

    回复
  8. 搁浅被注册了说道：
    2015年11月6日 10:30

    班长大人说这句话的时候真把我笑喷

    回复