<picture>

跳转到：
  1. 使用环境
  2. 属性
  3. 例子 1: 使用 media 属性
  4. 例子 2: 使用 type 属性
  5. 规范
  6. 浏览器兼容性
  7. 参考链接

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

参考链接

文档标签和贡献者

标签： 
此页面的贡献者： yisibl, PoppinL
最后编辑者: yisibl,