HTML <picture> 元素
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
HTML <picture> 元素是用于为其中包含的，特定的 <img> 指定多个 <source> 元素的容器。浏览器将根据页面的当前布局（显示图像的容器）以及显示设备（例如普通或高分辨率设备）来选择最合适的源。
特性
| 内容类别 | 流式内容，短语内容，嵌入内容 |
|---|---|
| 允许的内容 | 零到多个 <source> 元素，后面跟着一个 <img> 元素，可以混合一些脚本支持的元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受嵌入内容的元素。 |
| 允许的 ARIA 角色 | 无 |
| DOM 接口 | HTMLPictureElement |
属性
该元素只包含全局属性。
更多实例
使用 media 属性
media 属性可以指定用户代理评估的媒体查询，以选择 <source> 元素。如果媒体查询计算结果为 “false”，则跳过<source> 元素。
media 属性允许你提供一个用于给用户代理作为选择 <source> 元素的依据的媒体查询。如果这个媒体查询匹配结果为 false，那么这个 <source> 元素会被跳过。
<picture>
<source srcset="mifeng-logo-wide.png" media="(min-width: 600px)">
<img src="https://uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" alt="蜜蜂教程">
</picture>
使用 type 属性
type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。
<picture>
<source srcset="mifeng-logo.svg" type="image/svg+xml">
<img src="https://uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" alt="蜜蜂教程">
</picture>
规范
| 规范 | 状态 | 备注 |
|---|---|---|
HTML Living Standard<picture> 的定义 |
现行的标准 | 初始定义 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 38 | 13 |
38 32 — 521 |
不支持 | 25 | 9.1 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 38 | 38 | 支持 |
38 32 — 521 |
不支持 | 25 | 9.3 |
1. 从版本 32 开始到版本 52 (不包括)：该特性由 dom.image.picture.enabled 首选项控制（需要设置为 true）。要更改 Firefox 中的首选项，请访问 about:config。