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 的事件屬性