HTML <picture> 标签
示例
如何使用 <picture> 标签
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
自己动手试一试 »
定义和用法
<picture> 标签为 Web 开发人员在指定图像资源方面提供了更大的灵活性。
<picture> 元素最常见的用途是响应式设计中的艺术指导。与根据视口宽度缩放的单个图像不同，可以设计多个图像以更优雅地填充浏览器视口。
<picture> 元素包含两个标签：一个或多个 <source> 标签和一个 <img> 标签。
浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source> 元素，然后显示正确的图像（在 srcset 属性中指定）。 <img> 元素是必需的，作为 <picture> 元素的最后一个子元素，作为所有 source 标签都不匹配时的回退选项。
提示： <picture> 元素的工作方式“类似于”<video> 和 <audio>。您可以设置不同的源，然后使用第一个符合偏好的源。
浏览器支持
表格中的数字表示完全支持该元素的首个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
全局属性
<picture> 元素还支持 HTML 中的全局属性。
事件属性
<picture> 元素还支持 HTML 中的事件属性。
相关页面
HTML 教程：HTML <picture> 元素
CSS 教程：CSS 响应式设计 - 图像
