HTML <picture> 标签

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

<picture> 元素的最常见用途是在响应式设计中用于艺术指导。可以设计多个图像来更好地填充浏览器视口，而不是根据视口宽度缩放一个图像。

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

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

提示：<picture> 元素的作用类似于 <video> 和 <audio>。您设置好不同的来源，然后符合首选项的第一个 source 就是是所使用的来源。

 

1. 范例

如何使用 <picture> 标签：

<picture>
  <source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
  <source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">
  <img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>

我要试一试

 

2. 浏览器支持

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

元素 Chrome IE Firefox Safari Opera
<picture> 38.0 13.0 38.0 9.1 25.0

 

3. 全局属性

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

 

4. 事件属性

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

HTML <pre> 标签：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。