<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>图片元素</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>调整浏览器大小以查看不同视口大小下加载的不同版本的图片。
浏览器寻找媒体查询与用户当前视口宽度匹配的第一个源元素，
并获取 srcset 属性中指定的图像。</p>
<p>img 元素需要作为图片声明块的最后一个子标记。
img 元素用于为不支持 picture 元素的浏览器提供向后兼容性，或者如果没有匹配的源标记。
</p>
<p><strong>注意：</strong>图片元素在 IE12 及更早版本或 Safari 9.0 及更早版本中不受支持。</p>
</body>
</html>