srcset属性的作用
srcset是img元素的一个属性,主要用于浏览器根据宽、高和像素密度来加载相应的图片资源。
属性格式:图片地址 宽度描述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" alt="srcset属性的作用" srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w" sizes="(max-width:320px) 300w, 1200w"/>
上面的例子表示浏览器视口为 320px 时图片宽度为 300px,其他情况为 1200px。
下一篇
百度快速收录功能正式上线!熊掌号天级收录下线