<picture> 标签仅负责源选择，不控制布局；图片尺寸与响应式行为由内部 <img> 的 CSS（如 object-fit、max-width）决定，<source media> 匹配视口而非父容器宽度，局部响应需用 container queries 或 JS 降级。
picture 标签本身不支持“局部小组件级”的独立自适应
直接用 <picture> 包裹某个按钮、卡片或徽标内的图片，不会自动继承父容器尺寸或触发局部响应逻辑——它只管自己这一张图的源选择，不参与布局流控制。真正起作用的是内部的 <source> + <img> 组合，而 <img> 的尺寸行为仍由 CSS 决定。
常见错误现象：<picture> 套在宽度为 80px 的头像容器里，但图片仍按原始宽高渲染、溢出或拉伸；或者媒体查询写了 min-width: 768px，却在小屏手机上加载了桌面图。
- 必须显式给内部
<img>设置width/height或 CSSmax-width: 100%，否则它不会随容器缩放 -
<source>的media属性匹配的是视口（viewport）宽度，不是父元素宽度，无法响应“小组件变窄”这种局部变化 - 如果小组件本身是 flex 或 grid 子项，
<img>需要flex-shrink: 0或min-width: 0才能正常收缩
用 object-fit + width/height 控制局部图片形变与填充
当小组件尺寸固定（如 48px × 48px 头像、200px × 120px 卡片图），靠 <picture> 选源，靠 <img> 的 CSS 控制如何填满容器。
关键点：不用 width: 100%; height: 100% 粗暴拉伸，而是用 object-fit 保留比例：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover→ 裁切居中显示（适合头像、封面图） -
object-fit: contain→ 完整显示，留白（适合 logo、图标） - 必须同时设
width和height（或aspect-ratio），否则object-fit不生效
<picture> <source media="(min-width: 768px)" srcset="hero-desktop.webp" type="image/webp"> <source srcset="hero-mobile.webp" type="image/webp"> <img src="hero-fallback.jpg" alt="Hero" width="200" height="120" style="width: 100%; height: 100%; object-fit: cover;"> </picture>
响应父容器宽度需靠 container queries（非所有浏览器支持）
如果真要让图片根据“所在卡片宽度”而非“屏幕宽度”切换资源，目前唯一标准方案是 CSS @container 查询 + <img> 的 srcset 配合 sizes，但 <picture> 的 <source media> 不支持 container query。
所以实际做法是绕过 <picture>，改用单个 <img> 并把响应逻辑交给 CSS 容器：
- 给小组件容器加
container-type: inline-size - 用
<img sizes="(container-width < 200px) 100vw, 200px" srcset="...">（注意：sizes中的container-width是实验性语法，仅 Chromium 114+ 支持） - 降级方案：用 JS 监听容器尺寸变化，动态改
img.src，但会失去预加载和 SEO 友好性
容易被忽略的兼容性与性能细节
很多团队以为用了 <picture> 就万事大吉，结果在 iOS Safari 上加载了高清图却没缩放，在旧 Android 上 fallback 失败。
-
type="image/webp"必须确保服务器正确返回Content-Type: image/webp，否则 Safari 会静默跳过该<source> -
<img>的alt属性不可省略，否则无障碍阅读器无法识别，且部分浏览器（如 Firefox）在资源加载失败时不会显示占位符 - 不要在
<source>中混用media和type做多重条件判断——浏览器按顺序匹配，第一个满足的就用，后面的会被忽略 - 如果小组件频繁复用（如列表中的每个 item），建议把
<picture>模板抽成 HTML template 或组件，避免重复写<source>规则
最麻烦的其实是 fallback 图的尺寸管理：当 WebP 不可用时，JPEG 可能宽高比不同，object-fit 会表现不一致——得靠设计阶段就统一源图比例，而不是靠前端硬调。
