#使用srcset
實現響應式圖片
如何使用HTML img 標籤的srcset
屬性來定義響應式圖片
img標籤的srcset
屬性允許您根據像素密度或窗口寬度來設置響應式圖片,以滿足您的需求。這樣,它只需下載瀏覽器在渲染頁面時需要的資源,例如在移動設備上下載較大的圖片。
這是一個例子,我們為4個不同的屏幕尺寸提供了4個額外的圖片:
<img src="dog.png"
alt="一只狗的照片"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">
在srcset
中,我們使用w
衡量窗口寬度。
由於我們這樣做,還需要使用sizes
屬性:
<img src="dog.png"
alt="一只狗的照片"
sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">
在這個例子中,sizes
屬性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px
字符串描述了圖片與視窗的大小關係,多個條件用逗號分隔。
媒體條件max-width: 500px
將圖片的大小設定為與視窗寬度相關。簡而言之,如果窗口大小小於500px,它以100%的視窗大小渲染圖片。
如果窗口大小更大,但小於900px
,它以視窗大小的50%渲染圖片。
如果更大,則以800px的大小渲染圖片。
vw
單位的度量可能對您來說是新的,簡單來說,我們可以說1vw是視窗寬度的1%,因此100vw
是視窗寬度的100%。
一個有用的網站可以生成srcset
和逐漸縮小的圖片:https://responsivebreakpoints.com/。