图片元素

上一个模块演示了如何使用 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">
</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">
</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"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

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

剪裁

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

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

下面是一个示例，展示了如何根据视口宽度更改主打图片的内容和形状。向每个 source 元素添加 width 和 height 属性。

<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" fetchpriority="high">
</picture>

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

对于大多数自适应图片，您可能不需要使用 picture 元素，因为 img 元素上的 srcset 和 sizes 属性涵盖了许多使用情形。不过，如果您需要更精细的控制，picture 元素会是一个强大的工具。

有一种图片可能不需要这两种解决方案：图标。这就是接下来要做的。

检查掌握情况

测试您对 picture 元素的了解程度