HTML
<picture>
element
包含零个或多个
<source>
元素和一个
<img>
element to offer alternative versions of an image for different display/device scenarios.
The browser will consider each child
<source>
element and choose the best match among them. If no matches are found—or the browser doesn't support the
<picture>
element—the URL of the
<img>
元素的
src
attribute is selected. The selected image is then presented in the space occupied by the
<img>
元素。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
To decide which URL to load, the
用户代理
examines each
<source>
's
srcset
,
media
，和
type
attributes to select a compatible image that best matches the current layout and capabilities of the display device.
<img>
element serves two purposes:
<source>
elements are able to provide a usable image.
Common use cases for
<picture>
:
media
conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
注意： For example, newer formats like AVIF or WEBP have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: Image file type and format guide .
If providing higher-density versions of an image for high-DPI (Retina) display, use
srcset
在
<img>
element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit
media
conditions.
| 内容类别 | 流内容 , phrasing content, embedded content |
|---|---|
| 准许内容 |
Zero or more
<source>
elements, followed by one
<img>
element, optionally intermixed with script-supporting elements.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that allows embedded content. |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLPictureElement
|
This element includes only 全局属性 .
可以使用
object-position
property to adjust the positioning of the image within the element's frame, and the
object-fit
property to control how the image is resized to fit within the frame.
注意：
Use these properties on the child
<img>
element,
not
the
<picture>
元素。
These examples demonstrate how different attributes of the
<source>
element change the selection of the image inside
<picture>
.
media
attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each
<source>
元素。
若
<source>
's media condition evaluates to
false
, the browser skips it and evaluates the next element inside
<picture>
.
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
srcset
attribute is used to offer list of possible images
based on size
.
It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either...
w
(譬如
300w
);
x
(譬如
2x
) to serve a high-res image for high-DPI screens.
<picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo-480.png, logo-480-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture>
type
attribute specifies a
MIME 类型
for the resource URL(s) in the
<source>
元素的
srcset
attribute. If the user agent does not support the given type, the
<source>
element is skipped.
<picture> <source srcset="logo.webp" type="image/webp"> <img src="logo.png" alt="logo"> </picture>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<picture>' in that specification. |
实时标准 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
picture
|
Chrome 完整支持 38 | Edge 完整支持 13 |
Firefox
完整支持
38
|
IE 不支持 No | Opera 完整支持 25 | Safari 完整支持 9.1 | WebView Android 完整支持 38 | Chrome Android 完整支持 38 |
Firefox Android
完整支持
38
|
Opera Android 完整支持 25 | Safari iOS 完整支持 9.3 | Samsung Internet Android 完整支持 3.0 |
完整支持
不支持
用户必须明确启用此特征。
<img>
element
<source>
element
object-position
and
object-fit