这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
HTML <picture> 元素是一个容器，用来为其内部特定的 <img> 元素提供多样的 <source> 元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。
使用环境
| 内容分类 | 流内容，表述内容，迁入内容。 |
|---|---|
| 允许的内容 | 0 个或多个 <source> 元素，以及紧随其后的1 个 <img> 元素，可以混合一些脚本支持的元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何可以包含迁入内容的元素。 |
| DOM 接口 | HTMLPictureElement |
属性
这个元素只包含全局属性全局属性。
例子 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>
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| HTML Living Standard <picture> |
Living Standard | 初始定义 |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本功能 | 38 | 38 (38) | Edge 13 | 25 | 9.1 |
| 特性 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本功能 | 38 | 38.0 (38) | 未实现 | 25 | iOS 9.3 |
参考链接
<img>元素