img srcset 屬性

img 元素的 srcset 屬性用於瀏覽器根據寬、高和像素密度來加載相應的圖片資源。

屬性格式：圖片地址 寬度描述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);
}

上述代碼將會為普通屏幕使用 pic-1.jpg，為高分屏使用 pic-2.jpg，如果更高的分辨率則使用 pic-3.jpg，比如印刷。