HTML picture 标签

🌙
手机阅读
本文目录结构
axihe

HTML picture

HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。

浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的URL。

然后,所选图像呈现在 <img> 元素占据的空间中。

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

<picture> 常见使用场景

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

如果为高DPI(Retina)显示提供更高密度的图像版本,请srcset在<img>元素上使用。

这样一来,浏览器便可以在数据保存模式下选择低密度版本,而无需编写明确的media条件。

用法提示

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

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

示例

这些示例演示了 <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 属性

type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。

如果用户代理不支持指定的类型,那么这个 <source> 元素会被跳过。

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

全局属性

<picture> 标签支持全局属性,查看完整属性表 HTML 全局属性。


事件属性

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang