picture標(biāo)簽

實(shí)例

根據(jù)屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或?yàn)g覽器不支持 picture 屬性則使用 img 元素：

picture 元素允許我們在不同的設(shè)備上顯示不同的圖片，一般用于響應(yīng)式。

HTML5 引入了 <picture> 元素，該元素可以讓圖片資源的調(diào)整更加靈活。

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

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

表格中的數(shù)字表示支持該元素的第一個瀏覽器版本號。

元素
<picture>	38.0	13.0	38.0	9.1	25.0

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

<picture> 標(biāo)簽支持 HTML 的全局屬性。

<picture> 標(biāo)簽支持 HTML 的事件屬性。

上一篇：html標(biāo)簽下一篇：progress