HTML <picture> 标签

定义和用法

<picture> 标签让 web 开发人员在指定图像资源时更加灵活。

<picture> 元素最常见的用途是响应式设计中的艺术方向。可以设计多个图像以更好地填充浏览器视口，而不是让一张图像根据视口宽度按比例放大或缩小。

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

浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source> 元素，然后它将显示正确的图像（在 srcset 属性中指定）。 <img> 元素作为 <picture> 元素的最后一个子元素是必需的，用作当没有任何 source 标签匹配时的备用选项。

提示：<picture> 元素的工作方式与 <video> 和 <audio> 类似。您可以设置不同的源，适合首选项的第一个源将被使用。

另请参阅：

HTML 教程：HTML <picture> 元素

CSS 教程：CSS 响应式设计 - 图像

实例

<picture> 标签的使用方法：

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

亲自试一试

全局属性

<picture> 标签还支持 HTML 中的全局属性。

事件属性

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

浏览器支持

表中的数字注明了首个完全支持该标签的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0