img
元素的srcset
属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。
也就是说,我们不需要使用JavaScript
也可以实现分辨率自适应。
当然,仅限于图片,也就是img
标签。
属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。
像这样就可以表示浏览器宽度达到800px
则加载middle.jpg
达到1400px
则加载big.jpg
。
注意:像素密度描述只对固定宽度图片有效。
img
元素的 size 属性给浏览器提供一个预估的图片显示宽度。
同时,css
属性image-set()
支持根据用户分辨率适配图像。
上述代码将会为普通屏幕使用pic-1.jpg
,为高分屏使用pic-2.jpg
如果更高的分辨率则使用pic-3.jpg
,比如印刷。