HTML <picture> 元素

實例

根據螢幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或流覽器不支持 picture 屬性則使用 img 元素：

<picture> <source media="(min-width: 650px)" srcset="demo1.jpg"> <source media="(min-width: 465px)" srcset="demo2.jpg"> <img src="img_girl.jpg"> </picture>

定義

picture 元素允許我們在不同的設備上顯示不同的圖片，一般用於回應式。

HTML5 引入了 <picture> 元素，該元素可以躺圖片資源的調整更加靈活。

<picture> 元素零或多個 <source> 元素和一個 <img> 元素，每個 <source> 元素匹配不同的設備並引用不同的圖像源，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的 url。

注意:<img> 元素是放在最後一個 <picture> 元素之後，如果流覽器不支持該屬性則顯示 <img> 元素的的圖片。

流覽器支持

表格中的數字表示支持該元素的第一個流覽器版本號。

元素
<picture> 38.0 13.0 38.0 9.1 25.0

HTML 4.01 與 HTML5 之間的差異

<picture> 屬性是 HTML5 新定義的。

全局屬性

<picture> 標籤支持 HTML 的全局屬性。

事件屬性

<picture> 標籤支持 HTML 的事件屬性。