版本：HTML5

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

浏览器支持

示例

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

.output {
    background: #eee;
    position: relative;
} 

用法提示

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

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

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

的常见使用场景：

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

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

HTML 4.01 与 HTML5 之间的差异

属性是 HTML5 新定义的。

属性

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

全局属性

标签支持 HTML 的全局属性。

事件属性

标签支持 HTML 的事件属性。

示例

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

media属性

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

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com