Picture 元素

picture.md

picture 元素

浏览器已经支持 picture 元素，该元素与img的最大不同是可以根据媒体查询展示不同尺寸的图片，对响应式布局非常有用，目前浏览器支持情况良好， picture包含source字段 和 img字段，如果能匹配到source的媒体查询则，使用 source 的 srcset 字段，否则使用默认图片

例如：

<picture>
   <source media="(min-width:1024px)" srcset="dog-big.jpg">
   <source media="(min-width:465px)" srcset="dog-small.jpg">
   <img src="cat.jpg" alt="Flowers" style="width:auto;">
 </picture>