HTML <picture> 标签
例子
如何使用<picture>标签：
<picture>
<source media="(min-width:650px)" srcset="../images/img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="../images/img_white_flower.jpg">
<img src="../images/img_orange_flowers.jpg" alt="花朵" 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 响应式设计 - 图像
