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(必需) - 定义要显示的图像的URL
  • media - 接受通常在CSS中定义的任何有效媒体查询
  • sizes - 定义单个宽度描述符,带宽度描述符的单个媒体查询,或带宽度描述符的逗号分隔的媒体查询列表
  • type - 定义MIME类型

浏览器将使用属性值加载最合适的图像.浏览器将使用带有匹配提示的第一个 <source> 元素,并忽略以下任何 <source> 标记.

<img> 元素是 <picture> 声明块的最后一个子标记. <img> 元素用于为不支持<picture>元素的浏览器提供向后兼容性,或者如果没有匹配的 <source> 标记.

<picture> 元素的工作方式类似于 <video> 和 <audio> 元素.您设置了不同的源,第一个符合首选项的源是正在使用的源.



浏览器支持

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

Element
<picture> 38.0 13.0 38.0 9.1 25.0

HTML 4.01和HTML5之间的差异

<picture> 标记是HTML5中的新标记.


全局属性

<picture> 标记还支持HTML中的 全局属性 .


事件属性

<picture> 标记还支持HTML中的 事件属性 .


相关页面

CSS教程: CSS响应式设计 - 图像