轻松上手,快乐学习!

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>
亲自试一试 »

定义和用法

<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 响应设计 - 图像