©
                    本文档使用
                    php中文网手册 发布
                
这是一个实验中的功能
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
HTML<picture>元素是一个容器,用来为其内部特定的<img>元素提供多样的<source>元素。浏览器会根据当前页面(即图片所在的盒子的容器)的布局以及当前浏览的设备(比如普通的屏幕和高清屏幕)去从中选择最合适的资源。
内容类别  | Flow content, phrasing content, embedded content  | 
|---|---|
允许的内容  | 零个或多个<source>元素,后跟一个<img>元素,可选地与脚本支持元素混合在一起。  | 
标记遗漏  | 没有,起始和结束标签都是强制性的。  | 
允许父级  | 任何允许嵌入内容的元素。  | 
允许ARIA角色  | 没有  | 
DOM界面  | HTMLPictureElement  | 
这个元素只包含全局属性。
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>
type属性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  |