属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如:
<img src="small.jpg "
srcset="big.jpg 1440w,
middle.jpg 800w,
small.jpg 1x" />
上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ,达到 1400px 则加载 big.jpg。注意:像素密度描述只对固定宽度图片有效。
img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。
属性格式:媒体查询 宽度描述(支持px),多条规则用逗号分隔。
<img src="images/gun.png"
srcset="images/bg_star.jpg 1200w,
images/share.jpg 800w,
images/gun.png 320w"
sizes="(max-width: 320px) 300w,
1200w"
/>
上面的例子表示浏览器视口为 320px 时图片宽度为 300px,其他情况为 1200px。
css image-set()
css属性image-set()支持根据用户分辨率适配图像。
body {
background-image: -webkit-image-set(
url(../images/pic-1.jpg) 1x,
url(../images/pic-2.jpg) 2x,
url(../images/pic-3.jpg) 600dpi);
background-image: image-set(
url(../images/pic-1.jpg) 1x,
url(../images/pic-2.jpg) 2x,
url(../images/pic-3.jpg) 600dpi);
}