picture

这是一个实验中的功能

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

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

内容类别	Flow content, phrasing content, embedded content
允许的内容	零个或多个<source>元素，后跟一个<img>元素，可选地与脚本支持元素混合在一起。
标记遗漏	没有，起始和结束标签都是强制性的。
允许父级	任何允许嵌入内容的元素。
允许ARIA角色	没有
DOM界面	HTMLPictureElement

属性

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

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

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

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

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

Specification	Status	Comment
WHATWG HTML Living StandardThe definition of '<picture>' in that specification.	Living Standard	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	38	13	38 (38)	No support	25	9.1

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	38	(Yes)	38.0 (38)	No support	25	iOS 9.3

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18