轻松上手,快乐学习!

HTML Picture 图像元素


<picture> 元素允许您为不同的设备或屏幕大小显示不同的图像。



<picture> 元素

<picture> 元素为web开发人员指定图像资源提供了更大的灵活性。

<picture> 元素包含一个或多个 <source> 元素,每个元素通过 srcset 属性引用不同的图像。这样,浏览器可以选择最适合当前视图和/或设备的图像。

每个 <source> 元素都有一个 media 属性,用于定义图像何时最合适。

实例

针对不同的屏幕大小显示不同的图像:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>
亲自试一试 »

注释: 始终指定 <img> 元素作为 <picture> 元素的最后一个子元素。 <img> 元素由不支持 <picture> 元素的浏览器使用,或者如果 <source> 标记都不匹配。


何时使用 picture 元素

<picture> 元素有两个主要用途:

1. 带宽

如果您的屏幕或设备很小,则无需加载大的图像文件。浏览器将使用具有匹配属性值的第一个 <source> 元素,并忽略以下任何元素。

2. 格式支持

某些浏览器或设备可能不支持所有图像格式。通过使用 <picture> 元素,可以添加所有格式的图像,浏览器将使用它识别的第一种格式,并忽略以下任何元素。

实例

浏览器将使用其识别的第一种图像格式:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
亲自试一试 »

注释: 浏览器将使用具有匹配属性值的第一个 <source> 元素,并忽略以下任何 <source> 元素。


HTML Image 标签

标签 描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图中的可单击区域
<picture> 为多个图像资源定义容器

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册