HTML - <picture> 标签

HTML <picture> 标签定义了不同尺寸或分辨率的图像。它是<img> 标签的替代标签，包含<source> 和 <img> 元素。当您想根据设备显示不同的图像时，<picture> 标签非常有用。

<picture> 元素包含一个或多个<source> 元素和一个<img> 元素，后者作为块的最后一个子元素。<source> 元素包含针对各种显示设备场景的图像版本。<img> 元素描述了图像的尺寸和其他属性。浏览器获取每个子 <source> 元素并加载最合适的图像。如果找不到匹配项，浏览器将显示 <img> 标签提供的图像。

<picture> 标签的用途

<picture> 元素允许指定多个图像以更准确地填充浏览器视口，而不是只有一个根据视口宽度缩放的图像。它可以用于以下目的：

调整和裁剪适用于各种媒体情况的图片
在不支持某种格式时提供替代图像格式。

如何使用<picture> 标签？

您可以通过根据不同的媒体规则定义不同的图像来使用<picture> 标签。您需要使用多个<source> 元素和一个<img> 元素。

语法

以下是使用 picture 标签的语法

<picture>
   <source media="..." srcset="..">
   <source media="..." srcset="..">
   <img src="..." alt="..">
</picture>

与<picture> 标签一起使用的属性

HTML <picture> 标签还支持以下附加属性：

序号	属性与描述
1	media 接受任何有效的媒体查询，这些查询通常在 CSS 中定义。
2	sizes 定义单个宽度描述符、带宽度描述符的单个媒体查询或带宽度描述符的媒体查询的逗号分隔列表。
3	src 指定图像的 URL。
4	srcset (必需) 指定在不同情况下使用的图像的 URL。
5	type 定义 MIME 类型。

示例 1：基本用法

以下示例演示如何使用 media 属性根据屏幕宽度指定不同的图像

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
   <picture>
      <source media="(min-width: 600px)" srcset="/artificial_intelligence/images/artificial-intelligence-mini-logo.jpg">
      <source media="(min-width: 450px)" srcset="/cg/images/logo.png">
      <img src="/html/images/html-mini-logo.jpg" alt="LOGO" style="width:auto;">
   </picture>
</body>
</html>

示例 2：视网膜显示器的响应式图像

以下示例演示如何根据视网膜显示器设置不同的图像。执行代码后，在视网膜显示器上将加载“html-mini-logo.jpg”，在普通显示器上将加载“logo.png”。

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
<picture>
  <source srcset="/html/images/html-mini-logo.jpg 2x, /cg/images/logo.png 1x">
  <img src="/html/images/html_images.jpg" alt="High-resolution image">
</picture>
</body>
</html>

示例 3：使用不同的图像格式

此示例演示如何指定不同的格式。执行此示例后，如果浏览器支持 WebP，则将加载1.webp，这是一个更优化的格式。否则，将加载html_images.jpg。

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
   </style>
<body style="background-color:#EAFAF1">
<picture>
  <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/1.webp"/>
  <source type="image/jpeg" srcset="/html/images/html_images.jpg"/>
  <img src="/html/images/html-mini-logo.jpg" alt="Different formats images"/>
</picture>
</body>
</html>

html_tags_reference.htm

打印页面