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>
元素的最后一个子元素是必需的,作为如果没有一个源标签匹配的备用选项。
提示:<picture>
元素的工作方式与 <video> 和 <audio> “类似”。您设置不同的来源,第一个符合首选项的来源就是被使用的来源。
浏览器支持
表中的数字指定了完全支持该元素的第一个浏览器版本。
元素 | |||||
---|---|---|---|---|---|
<picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
全局属性
<picture>
标签还支持 HTML 中的全局属性。
事件属性
<picture>
标签还支持 HTML 中的事件属性。
相关页面
HTML 教程:HTML <picture> 元素
CSS 教程:CSS 响应式设计 - 图像