picture

<picture>

这是一个实验中的功能

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

HTML<picture>元素是一个容器，用来为其内部特定的<img>元素提供多样的<source>元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。

属性

这个元素只包含全局属性。

示例1：使用该media属性

media属性允许你提供一个用于给用户代理作为选择<source>元素的依据的媒体查询。如果这个媒体查询匹配结果为false，那么这个<source>元素会被跳过。

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

示例2：使用该type属性

type属性允许你为<source>元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个<source>元素会被跳过。

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

规范

浏览器兼容性