Html5中图片利用img标签srcset属性做retina屏幕适配

html5 responsive 前端 · best · 于 4年前 发布 · 1757 次阅读

srcset属性

下面是图片(img)元素,同时包含了src和srcset属性.

当浏览器不支持srcset属性的时候src属性的值作为默认图片.

标准分辨率的时候, srcset属性中, 1x 变量对应的图片将作为[1倍图片]. 当屏幕显示每个CSS像素使用2倍设备像素时, 2x v变量对应的图片将作为[2倍图片]. 同理, 这里还设置了3x 和 4x的图片.

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

参考文档:

  1. webkit: The srcset Attribute.
  2. What Img Srcset Does In HTML5: A Quick & Simple Guide
共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册