<picture> 是一個 的HTML5 標籤、不需要 JavaScript 與 CSS 就可針對斷點達成響應式圖片的設定。
如果瀏覽器，無法辨識（解譯） <picture>，使用傳統的 <img> 標籤處理會有較高的相容性。
picture 標籤說明
1 2 3 4 5 6 7 | <picture> <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)"> <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)"> <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)"> <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)"> <img src="default_landscape.jpg" alt="My default image"> </picture> |
picture 標籤本身只是一個容器、沒有自己的屬性。
而被包含在其中的 <source> 則是用於載入圖片，相關的設定如下：
- srcset (必要)：指定替代圖片的路徑。
- media：用法與 CSS 中的媒體查詢相同。(e.g. max-width, min-width, max-height, min-height, orientation)
- sizes：指定圖片的尺寸。(e.g. sizes="100vw") 或是同時指定媒體查詢及圖片尺寸。(e.g. sizes="(max-width: 30em) 100vw")
- type：指定替代圖片的格式，(e.g. type="image/webp" or type="image/vnd.ms-photo")
的順序很重要、瀏覽器會直接使用第一個符合的 <source> 而忽略掉後續的標籤。
在 picture 標籤結束前指定一個 img 標籤
最後再指定一個 <img> 元素作為 <picture> 標籤中的預設圖片、當瀏覽器不支援 <picture> 標籤或是沒有符合的 <source> 時，則直接顯示 <img> 。
<img> 一定要放在最後、因為瀏覽器會忽略掉所有在 <img> 之後的 <source>。
實例製作
透過假圖網站取得不同圖片，只針對斷點就可以看到不同的圖片切換。
1 2 3 4 5 6 | <picture> <source srcset="https://unsplash.it/1024/1024?image=0" media="(min-width: 1024px)"> <source srcset="https://unsplash.it/750/750?image=1" media="(min-width: 750px)"> <source srcset="https://unsplash.it/300/300?image=2" media="(min-width: 300px)"> <img src="https://unsplash.it/1024/1024?image=3" alt="預設的圖片"> </picture> |
See the Pen HTML5 – picture 標籤針對不同斷點切換圖片 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
使用 jQuery 測裝置寬高語法，在 codepen 裡無法正常運作，可載到本地點開啟就可看到目前視窗的高寬數值回應在瀏覽器上。
資料來源
相關的成品與文章