picture 元素

使用内容集保持井井有条 根据您的偏好保存内容并对其进行分类。

上一模块演示了 srcset 属性如何允许您提供同一图片的不同尺寸版本。然后，浏览器可以决定使用哪个版本。如果您想完全更改图片，则需要 picture 元素。

正如 srcset 构建于 src 属性之上一样， picture 元素构建于 img 元素之上。 picture 元素包裹着 img 元素。

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

如果 picture 元素内部没有嵌套 img 元素，则 picture 元素将不起作用。

与 srcset 属性类似， picture 元素将更新该 img 元素中 src 属性的值。不同之处在于， srcset 属性向浏览器提供建议，而 picture 元素则提供命令。这让您可以进行控制。

source

您可以在 picture 元素内指定多个 source 元素，每个元素都有自己的 srcset 属性。然后，浏览器会执行它能够执行的第一个元素。

图片格式

在此示例中，有三种不同格式的三种不同图片

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

第一个 source 元素指向采用新的 AVIF 格式的图片。如果浏览器能够呈现 AVIF 图片，那么它会选择该图片文件。否则，它会继续处理下一个 source 元素。

第二个 source 元素指向采用 WebP 格式的图片。如果浏览器能够呈现 WebP 图片，它将使用该图片文件。

否则，浏览器将回退到 img 元素的 src 属性中的图片文件。该图片是 JPEG 格式。

这意味着您可以开始使用新的图片格式，而不会牺牲向后兼容性。

在该示例中， type 属性告诉浏览器指定了哪种图片格式。

图片尺寸

除了在图片格式之间切换之外，您还可以在图片尺寸之间切换。使用 media 属性来告诉浏览器图片的显示宽度。将媒介查询放在 media 属性内。

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

在这里，您是在告诉浏览器，如果视口宽度大于 75em，则必须使用大尺寸图片。在 40em 和 75em 之间，浏览器必须使用中等尺寸图片。低于 40em，浏览器必须使用小尺寸图片。

这与在 img 元素上使用 srcset 和 sizes 属性不同。在那种情况下，您是在向浏览器提供建议。 source 元素更像是命令，而不是建议。

您还可以在 source 元素的 srcset 属性内使用像素密度描述符。

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

在该示例中，您仍然在告诉浏览器在不同的断点处执行什么操作，但现在浏览器可以选择最适合设备像素密度的图片。

裁剪

如果您只需要提供同一图片的不同尺寸版本， srcset 是您的最佳选择。但是，如果图片在较小尺寸下看起来不佳，您可以尝试制作图片的裁剪版本。

不同的图片可能具有不同的宽高比，以更好地适应其上下文。例如，在移动浏览器上，您可能希望提供一个窄而高的裁剪版本，而在桌面浏览器上，您可能希望提供一个宽而矮的裁剪版本。

这是一个英雄图片的示例，该图片根据视口宽度更改其内容和形状。将 width 和 height 属性添加到每个 source 元素。

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

请记住，您无法根据图片来源更改 alt 属性。您需要编写一个 alt 属性，用于描述完整尺寸图片和裁剪图片。

您可能不需要为大多数自适应图片使用 picture 元素， img 元素上的 srcset 和 sizes 属性涵盖了很多用例。但是，对于那些需要更精细控制的情况， picture 元素是一个强大的工具。

有一种图片您可能不需要任何一种解决方案：图标。接下来会介绍图标。

检查您的理解情况

测试您对 picture 元素的了解