HTML <picture>元素

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

HTML <picture> 元素

HTML<picture>element 为 Web 开发人员指定图片资源提供了更大的灵活性。

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

每个<source>元素有一个media定义图片何时最合适的属性。

针对不同的屏幕尺寸显示不同的图片：

笔记：始终指定一个<img>元素作为最后一个子元素<picture>元素。这<img>元素被不支持的浏览器使用<picture>元素，或者如果没有<source>标签匹配。

其主要目的有两个<picture>元素：

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

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

浏览器将使用它识别的第一个图片格式：

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

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 标签参考。