directory search
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
characters

这是一个实验中的功能

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

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

内容类别


Flow content, phrasing content, embedded content

允许的内容

零个或多个<source>元素,后跟一个<img>元素,可选地与脚本支持元素混合在一起。

标记遗漏

没有,起始和结束标签都是强制性的。

允许父级

任何允许嵌入内容的元素。

允许ARIA角色

没有

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>

规范

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

Previous article: Next article: