<picture>

版本：HTML5

HTML <picture>元素通过包含零或多个<source>元素和一<img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子<source>元素，如果没有匹配的，就选择<img>元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。

浏览器支持

只有IE浏览器不支持，其余浏览器都支持<picture>

示例

<!--Change the browser window width to see the image change.-->

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

<style>
footer {
    font-size: .8rem;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.output {
    background: #eee;
    position: relative;
}
</style>

用法提示

你可以使用object-position属性调整元素框架内图像的位置，用object-fit属性控制图片如何调整大小来适应框架。

提示：在子<img>元素上使用这些属性，不是<picture>元素。

要决定加载哪个URL，user agent检查每个<source>的srcset、media和type属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

<picture>的常见使用场景：

• 艺术指导(Art direction)——针对不同media条件裁剪或修改图像
• 遇到所有浏览器都不支持的特定格式时，提供不同的图像格式

如果为高DPI（Retina）显示提供更高密度版本的图像，请改用<img>元素上的srcset。这允许浏览器在数据保存模式下选择低密度版本，而不必编写显式的媒体条件。

HTML 4.01 与 HTML5 之间的差异

<picture>属性是 HTML5 新定义的。

属性

这个元素只包含全局属性。

全局属性

<picture>标签支持 HTML 的全局属性。

事件属性

<picture>标签支持 HTML 的事件属性。

示例

这些示例演示了<source>元素的不同属性如何更改<picture>中图像的选择。

media属性

media属性允许你提供一个用于给用户代理作为选择<source>元素的依据的媒体条件(media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为false，那么这个<source>元素会被跳过。

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="mdn">
</picture>

type属性允许你为<source>元素的srcset属性指向的资源指定一个MIME 类型。如果用户代理不支持指定的类型，那么这个<source>元素会被跳过。

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="mdn">
</picture>