HTML <picture> 元素通過包含零或多個 <source> 元素和一個 <img> 元素來為不同的顯示/設(shè)備場景提供圖像版本。瀏覽器會選擇最匹配的子 <source> 元素，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的URL。然后，所選圖像呈現(xiàn)在 <img>元素占據(jù)的空間中。
根據(jù)屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或瀏覽器不支持 picture 屬性則使用 img 元素：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(cainiaoplus.com)</title> </head> <body> <h2>picture 元素</h2> <picture> <source media="(min-width: 650px)" srcset="/run/html/views.png"> <source media="(min-width: 465px)" srcset="/run/html/default.jpg"> <img src="/run/html/haha.gif" style="width:auto;"> </picture> </body> </html>測試看看 ?/?
picture 元素允許我們在不同的設(shè)備上顯示不同的圖片，一般用于響應(yīng)式。
HTML5 引入了 <picture> 元素，該元素可以躺圖片資源的調(diào)整更加靈活。
<picture> 元素零或多個 <source> 元素和一個 <img> 元素，每個 <source> 元素匹配不同的設(shè)備并引用不同的圖像源，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的 url。
注意:
<img> 元素是放在最后一個 <picture> 元素之后，如果瀏覽器不支持該屬性則顯示 <img> 元素的的圖片。 表格中的數(shù)字表示支持該元素的第一個瀏覽器版本號。
IEFirefoxOperaChromeSafari
<picture> 屬性是 HTML5 新定義的。
<picture> 標簽支持 HTML 的全局屬性。
<picture> 標簽支持 HTML 的事件屬性。