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="鲜花" style="width:auto;">
</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="鲜花" style="width:auto;">
</picture>
定义和用法
<picture> 标签为web开发人员提供了指定图像资源的更多灵活性。
<picture> 元素允许我们在不同的设备上显示不同的图片，一般用于响应式。
<picture> 元素包含两个标记：一个或多个 <source> 标签和一个<img> 标签。
每个 <source> 元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择 <img> 元素的 src 属性中的 url。
提示: <picture> 元素的工作原理与 <video> 和 <audio>类似。您设置了不同的源，符合首选项的第一个源就是正在使用的源
浏览器支持
表中的数字指完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
全局属性
<picture> 标签支持 HTML 中的全局属性。
事件属性
<picture> 标签支持 HTML 中的事件属性。
相关页面
HTML 教程: HTML <picture> 元素
CSS 教程: CSS 响应设计 - 图像
