浅谈HTML img标签中的srcset属性-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

今天看前辈的代码时，发现img标签有个陌生的srcset属性，如下：

1	`<img` `class="Avatar"` `src="https://pic3.zhimg.com/8622a8eea_s.jpg"` `srcset="https://pic3.zhimg.com/8622a8eea_xs.jpg 2x"` `alt="测试用户1">`

翻阅得知此属性用于：以最合适的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）。使用如下：

1	`<img` `src="source.jpg"` `srcset="source_2x.jpg 2x, source_3x.jpg 3x">`

1 2	`<img` `src="source.jpg"` `width="100%"` `srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">`

2x、3x 表示目标屏幕的像素密度；400w、600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。

通过window.devicePixelRatio来获取像素比

更多编程相关知识，请访问：编程视频！！

相关阅读 >>

更多相关阅读请进入《Html》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者