HTML <picture> 標籤
示例
如何使用 <picture> 標籤
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
自己動手試一試 »
定義和用法
<picture> 標籤為 Web 開發人員在指定影像資源方面提供了更大的靈活性。
<picture> 元素最常見的用途是響應式設計中的藝術指導。與根據視口寬度縮放的單個影像不同，可以設計多個影像以更優雅地填充瀏覽器視口。
<picture> 元素包含兩個標籤：一個或多個 <source> 標籤和一個 <img> 標籤。
瀏覽器將查詢媒體查詢與當前視口寬度匹配的第一個 <source> 元素，然後顯示正確的影像（在 srcset 屬性中指定）。 <img> 元素是必需的，作為 <picture> 元素的最後一個子元素，作為所有 source 標籤都不匹配時的回退選項。
提示： <picture> 元素的工作方式“類似於”<video> 和 <audio>。您可以設定不同的源，然後使用第一個符合偏好的源。
瀏覽器支援
表格中的數字表示完全支援該元素的首個瀏覽器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
全域性屬性
<picture> 元素還支援 HTML 中的全域性屬性。
事件屬性
<picture> 元素還支援 HTML 中的事件屬性。
相關頁面
HTML 教程：HTML <picture> 元素
CSS 教程：CSS 響應式設計 - 影像
