HTML <picture> 標簽

定義和用法

<picture> 標簽讓 web 開發人員在指定圖像資源時更加靈活。

<picture> 元素最常見的用途是響應式設計中的藝術方向。可以設計多個圖像以更好地填充瀏覽器視口，而不是讓一張圖像根據視口寬度按比例放大或縮小。

<picture> 元素包含兩個標簽：一個或多個 <source> 標簽 和一個 <img> 標簽。

瀏覽器將查找媒體查詢與當前視口寬度匹配的第一個 <source> 元素，然后它將顯示正確的圖像（在 srcset 屬性中指定）。 <img> 元素作為 <picture> 元素的最后一個子元素是必需的，用作當沒有任何 source 標簽匹配時的備用選項。

提示：<picture> 元素的工作方式與 <video> 和 <audio> 類似。您可以設置不同的源，適合首選項的第一個源將被使用。

另請參閱：

HTML 教程：HTML <picture> 元素

CSS 教程：CSS 響應式設計 - 圖像

實例

<picture> 標簽的使用方法：

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

親自試一試

全局屬性

<picture> 標簽還支持 HTML 中的全局屬性。

事件屬性

<picture> 標簽還支持 HTML 中的事件屬性。

瀏覽器支持

表中的數字注明了首個完全支持該標簽的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0