码农教程 - 一技在手,衣食无忧! tools

HTML <picture> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

如何使用<图片>标签：

<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> 元素，然后它将显示正确的图片（在 srcset 属性中指定）。 <img> 元素需要作为该元素的最后一个子元素<picture>元素，如果没有源标签匹配，则作为备选选项。

提示：这个<picture>元素适用于 <video> 和 <audio> 的 "similar"。您设置了不同的源，第一个符合首选项的源就是正在使用的源。

浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

Element
<picture> 38.0 13.0 38.0 9.1 25.0

全局属性

这个<picture>标签还支持HTML 中的全局属性。

事件属性

这个<picture>标签还支持HTML 中的事件属性。

相关页面

HTML 教程：HTML <图片> 元素

CSS 教程：CSS 响应式设计 - 图片


❮上一节 完整的 HTML参考 下一节❯