©
This document uses PHP Chinese website manual Release
这是一个实验中的功能
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
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 |