HTML <picture> 元素
HTML <picture> 元素允許您為不同的裝置或螢幕尺寸顯示不同的圖片。
HTML <picture> 元素
HTML <picture> 元素為 Web 開發人員提供了更靈活的指定影像資源的方式。
該 <picture> 元素包含一個或多個 <source> 元素，每個元素都透過 srcset 屬性引用不同的影像。這樣，瀏覽器就可以選擇最適合當前檢視和/或裝置的影像。
每個 <source> 元素都有一個 media 屬性，該屬性定義了何時影像最合適。
示例
為不同螢幕尺寸顯示不同圖片
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
自己動手試一試 »
注意：始終將 <img> 元素作為 <picture> 元素的最後一個子元素。不支援 <picture> 元素的瀏覽器，或者沒有 <source> 標籤匹配時，瀏覽器將使用 <img> 元素。
何時使用 Picture 元素
該 <picture> 元素有兩個主要用途：
1. 頻寬
如果您使用小螢幕或裝置，則無需載入大影像檔案。瀏覽器將使用第一個具有匹配屬性值的 <source> 元素，並忽略任何後續元素。
2. 格式支援
某些瀏覽器或裝置可能不支援所有影像格式。透過使用 <picture> 元素，您可以新增所有格式的影像，瀏覽器將使用它識別的第一個格式，並忽略任何後續元素。
示例
瀏覽器將使用它識別的第一個影像格式
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
自己動手試一試 »
注意：瀏覽器將使用第一個具有匹配屬性值的 <source> 元素，並忽略任何後續的 <source> 元素。
HTML 影像標籤
| 標籤 | 描述 |
|---|---|
| <img> | 定義一個影像 |
| <map> | 定義影像對映 |
| <area> | 在影像對映中定義可點選區域 |
| <picture> | 定義多個影像資源的容器 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
