实例  

如何使用<picture>标签：

<picture>

<source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">

<source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">

<img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">

</picture>

定义和用法  

<picture>标签使Web开发人员在指定图像资源方面更具灵活性。  

<picture>元素的最常见用途是在响应式设计中用于艺术指导。可以设计多个图像来更好地填充浏览器视口，而不是根据视口宽度缩放一个图像。  

<picture>元素包含两个标签：一个或多个<source>标签和一个<img>标签。  

浏览器将查找媒体查询与当前视口宽度匹配的第一个<source>元素，然后显示正确的图像（在srcset属性中指定）。<img>元素是<picture>元素的最后一个子元素，如果没有source标签匹配，则作为后备选项。  

提示：<picture>元素的作用类似于<video>和<audio>。您设置好不同的来源，然后符合首选项的第一个source就是是所使用的来源。