<picture>: 图片容器标签
最后更新：2026-10-13
<picture>图片容器标签
为 img 提供多个图像源，让浏览器根据屏幕宽度、分辨率等条件自动选择最合适的图片。
| 分类 | 链接与媒体 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </picture> 标签 |
| 状态 | 标准 |
📝 语法
<picture>图像源</picture>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <picture> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： picture 必须包含一个 img 作为兜底；source 只负责“选哪张”，真正渲染始终是 img。
❓ 常见问题
Qpicture 和 img 有什么区别？
A
<picture> 是 img 的「格式/裁剪选择器」：内含多个 <source> 和一个兜底 <img>，浏览器按条件选最优资源（新版格式、不同裁剪）。img 只能加载单一资源。注意 picture 本身不显示，真正的替换逻辑仍发生在 img 上。Qpicture 怎么提供 WebP 回退？
Asource 写新格式、img 兜底旧格式：
<picture><source type='image/webp' srcset='a.webp'><img src='a.jpg' alt='…'></picture>。支持 WebP 的浏览器选 source，不支持的自动落到 img 的 jpg。Qpicture 的 media 属性怎么用？
Asource 上写媒体查询实现「不同屏幕给不同裁剪图」：
<source media='(max-width: 600px)' srcset='small.jpg'>。命中条件的 source 优先；多个 source 按书写顺序取第一个命中的，兜底永远是 img。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
