HTML5 `<picture>` 标签

说明

<picture> 元素用于响应式设计中的艺术指导。

<picture> 元素包含零个或多个 <source> 元素和一个 <img> 元素，用于根据设备屏幕尺寸显示不同版本的图像。

下表总结了此标签的使用上下文和版本历史。

Placement:	Inline
Content:	零个或多个 `<source>` 元素，后跟一个 `<img>` 元素
开始/结束标签：	开始标签： required, 结束标签：required
版本：	New in HTML5

语法

<picture> 标签的基本语法如下：

下面的示例显示了 <picture> 标签的作用。

示例

Try this code »

<picture>
    <source media="(min-width: 1024px)" srcset="images/banner-large.png">
    <source media="(max-width: 768px)" srcset="images/banner-small.png">
    <img src="images/banner.png" alt="Banner">
</picture>

提示： 浏览器会考虑每个子 <source> 元素并从中选择最佳匹配。如果未找到匹配项——或者浏览器不支持 <picture> 元素——则选择 <img> 元素的 src 属性的 URL。

标签特定属性

<picture> 标签没有任何特定属性。

全局属性

与所有其他 HTML 标签一样， <picture> 标签支持 HTML5 中的全局属性。

事件属性

<picture> 标签还支持 HTML5 中的事件属性。

浏览器兼容性

所有主要的现代浏览器都支持 <picture> 标签。

基本支持—

Firefox 38+
Google Chrome 38+
Edge 13+
Apple Safari 9.1+
Opera 25+

进一步阅读

请参阅以下教程： HTML 图片.

HTML5 <picture> 标签

说明

语法

示例