HTML <picture> 标签

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

实例

如何使用 <picture> 标签：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>picture 元素</h1>
<p>请调整浏览器窗口的大小以加载不同的图像。</p>
<picture>
  <source media="(min-width:650px)" srcset="/images/flower-4.jpg">
  <source media="(min-width:465px)" srcset="/images/tulip.jpg">
  <img src="/images/flower.gif" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>

运行一下

定义和用法

<picture>标签使web开发人员在指定图像资源方面具有更大的灵活性。

最常用的<picture>元素将用于响应设计的网页。可以设计多个图片，以更精确地填充浏览器界面，而不是基于界面宽度缩放或缩小一个图片。

<picture>标签包含两个标记：一个或多个<source>标记和一个<img>标记。

浏览器将查找媒体查询与当前视口宽度匹配的第一个<source>元素，然后显示适当的图像（在srcset属性中指定）。如果源标记不匹配，则需要将<img>元素作为<picture>元素的最后一个子元素，作为回退选项。

提示：<picture>元素的工作原理与<video>和<audio>类似。您设置了不同的源，第一个符合条件的图片源就是picture最终显示的图片。

浏览器支持

表格中的数字注明了支持该元素的首个浏览器版本。

元素
<picture>	38.0	13.0	38.0	9.1	25.0

标签属性

media 属性

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

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

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

事件属性

<picture> 标签同时支持HTML 中的事件属性。