img標籤中的srcset屬性有什麼用？
阿新 • • 發佈：2022-05-23
img元素的srcset屬性用於瀏覽器根據寬、高和畫素密度來載入相應的圖片資源。
也就是說，我們不需要使用JavaScript也可以實現解析度自適應。
當然，僅限於圖片，也就是img標籤。
屬性格式：圖片地址 寬度描述w 畫素密度描述x，多個資源之間用逗號分隔。
像這樣就可以表示瀏覽器寬度達到800px則載入middle.jpg達到1400px則載入big.jpg。
注意：畫素密度描述只對固定寬度圖片有效。
img元素的 size 屬性給瀏覽器提供一個預估的圖片顯示寬度。
同時，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，比如印刷。