HTML `<picture>` 元素

HTML 元素允许您可以显示不同的图片不同的设备或屏幕尺寸。<picture>

HTML `<picture>` 元素

HTML 元素给出了 web 开发人员在以下方面具有更大的灵活性指定图像资源。<picture>

该元素包含一个或更多元素，每个元素都引用通过属性添加到不同的图像。这样浏览器就可以选择最好的图像适合当前视图和/或设备。<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_smiley.gif" alt="Beatles" style="width:auto;">
</picture>

尝试一下 »

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

HTML Image标签

Tag	Description
`<img>`	Defines an image
`<map>`	Defines an image map
`<area>`	Defines a clickable area inside an image map
`<picture>`	Defines a container for multiple image resources

有关所有可用 HTML 标记的完整列表，请访问我们的 [HTML 标记参考]。

HTML `<picture>` 元素

HTML <picture> 元素