HTML <picture> 元素
HTML <picture> 元素允许您为不同的设备或屏幕尺寸显示不同的图片。
HTML <picture> 元素
HTML <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> 元素的最后一个子元素。如果浏览器不支持 <picture> 元素，或者如果没有任何 <source> 标签匹配，则 <img> 元素将被使用。
何时使用图片元素
<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 图像标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
| <picture> | 定义多个图像资源的容器 |
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
