<picture>:picture 元素

HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的 URL。然后,所选图像呈现在<img>元素占据的空间中。

尝试一下

要决定加载哪个 URL,user agent 检查每个 <source>srcsetmediatype 属性,来选择最匹配页面当前布局、显示设备特征等的兼容图像。

<img> 元素有两个目的:

  • 描述图像的大小和其他属性及其呈现。
  • 在所有的 <source> 元素提供的图片都不可用时提供备选图片。

<picture> 的常见使用场景:

  • 艺术指导(Art direction)。针对不同 media 条件裁剪或修改图像(例如,在较小的显示器或图像的详细内容太多时显示较为图像的简单版本)。
  • 遇到不支持的特定格式时,提供替代的图像格式

    备注: 例如,像 AVIFWEBP 这样的新格式具有诸多优点,但可能不受浏览器的支持。可以在图像文件格式和格式指南中找到支持的图像格式的列表。

  • 通过加载最适合观看者显示的图像来节省带宽和提高页面加载速度

如果要为高 DPI(Retina)显示提供更高像素密度的图像版本,请在 <img> 元素上使用 srcset。这使得浏览器可以在节约流量模式下选择低像素密度版本,且不需要你编写明确的 media 条件。

内容分类 流内容,表述内容,嵌入内容。
允许的内容 零或多个 <source> 元素,以及紧随其后的一个 <img> 元素,可以混合一些脚本支持的元素。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何可以包含嵌入内容的元素。
允许的 ARIA roles
DOM 接口 HTMLPictureElement (en-US)

属性

这个元素只包含全局属性

用法提示

你可以使用 object-position 属性调整元素框架内图像的位置,用 object-fit 属性控制图片如何调整大小来适应框架。

备注: 在子 <img> 元素上使用这些属性,不是 <picture> 元素。

示例

这些示例演示了 <source> 元素的不同属性如何更改<picture>中图像的选择。

media 属性

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

html
<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> 元素会被跳过。

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

规范

Specification
HTML Standard
# the-picture-element

浏览器兼容性

BCD tables only load in the browser

参考链接