<picture>: 图片元素

基线广泛可用

此功能已成熟稳定，可在许多设备和浏览器版本中使用。自 2016 年 3 月.

<picture> HTML 元素包含零个或多个 <source> 元素和一个 <img> 元素，以便为不同的显示/设备场景提供图像的备用版本。

浏览器将考虑每个子 <source> 元素，并在其中选择最佳匹配项。如果找不到匹配项，或者浏览器不支持 <picture> 元素，则将选择 <img> 元素的 src 属性的 URL。然后，所选图像将在 <img> 元素占用的空间中呈现。

尝试一下

为了确定要加载哪个 URL，用户代理将检查每个 <source> 的 srcset、media 和 type 属性，以选择与当前布局和显示设备功能最匹配的兼容图像。

<img> 元素有两个作用

它描述了图像及其呈现的大小和其他属性。
如果所有提供的<source>元素都无法提供可用的图像，则它提供一个备用方案。

<picture> 的常见用例

艺术指导。 针对不同的media条件裁剪或修改图像（例如，在较小的显示器上加载一个没有太多细节的图像的简化版本）。
提供替代图像格式，用于某些格式不受支持的情况。

注意： 例如，像 AVIF 或 WEBP 这样的新格式有很多优势，但可能不受浏览器支持。支持的图像格式列表可以在以下位置找到：图像文件类型和格式指南。
通过为观看者的显示器加载最合适的图像来节省带宽并加快页面加载时间。

如果要为高 DPI（视网膜）显示器提供更高密度的图像版本，请在<img>元素上使用 srcset。这使浏览器可以在节省数据模式下选择较低密度的版本，而且您不必编写显式的media条件。

属性

此元素仅包含全局属性。

使用说明

您可以使用 object-position 属性来调整图像在元素框架内的定位，并使用 object-fit 属性来控制图像如何调整大小以适合框架。

注意： 将这些属性应用于子<img>元素，而不是<picture>元素。

示例

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

media 属性

media 属性指定了一个媒体条件（类似于媒体查询），用户代理会为每个 <source> 元素评估该条件。

如果 <source> 的媒体条件评估为false，浏览器会跳过它并评估<picture> 内的下一个元素。

html

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

srcset 属性

srcset 属性用于根据大小或显示器的像素密度提供一组可能的图像。

它由一个用逗号分隔的图像描述符列表组成。每个图像描述符都包含图像的 URL，以及要么

一个宽度描述符，后跟一个w（例如300w）；要么
一个像素密度描述符，后跟一个x（例如2x），用于为高 DPI 屏幕提供高分辨率图像。

请务必注意

宽度和像素密度描述符不应一起使用
缺少像素密度描述符意味着 1x
不允许重复描述符值（2x & 2x, 100w & 100w）

以下示例说明了如何使用srcset属性和<source>元素来指定高密度和标准分辨率图像

html

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>

srcset属性也可以用于<img>元素，而不需要<picture>元素。以下示例演示了如何使用srcset属性分别指定标准分辨率和高密度图像

html

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs logo" />

sizes属性在使用 srcset 时不是必需的，但建议使用它，以便为浏览器提供额外的信息，帮助它选择最佳图像源。

如果没有 sizes，浏览器将使用图像的默认大小，如其以像素为单位的尺寸所指定。这可能不是所有设备的最佳选择，尤其是在图像以不同屏幕尺寸或在不同上下文环境中显示时。

请注意，只有在使用 srcset 时提供宽度维度描述符（例如 200w，而不是 2x），sizes 才会生效。有关使用srcset的更多信息，请参阅响应式图像文档。

type 属性

type 属性指定 MIME 类型，用于 <source> 元素的srcset属性中的资源 URL。如果用户代理不支持给定的类型，则会跳过 <source> 元素。

html

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

技术摘要

内容类别	流内容，短语内容，嵌入内容
允许的内容	零个或多个 `<source>` 元素，后跟一个 `<img>` 元素，可以选择与支持脚本的元素混合。
标签省略	无，起始标签和结束标签都是必需的。
允许的父级	允许嵌入内容的任何元素。
隐式 ARIA 角色	没有对应的角色
允许的 ARIA 角色	不允许`role`。
DOM 接口	`HTMLPictureElement`

规范

规范
HTML 标准 # the-picture-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

<img> 元素
<source> 元素
将图片定位和调整大小以适应其框架：object-position 和 object-fit
图像文件类型和格式指南