本身不支持object-fit，必须作用于内部并确保其父容器有明确宽高或aspect-ratio；cover等值才生效。
<picture></picture> 标签本身不直接支持 object-fit，因为它是响应式图片的容器（类似 <div>），真正渲染图片的是内部的 <code><img> 元素。所以控制裁剪方式的关键不在 <picture></picture>，而在它包裹的 <img> 上。
要让 <picture></picture> 中的图片按需裁剪，核心逻辑是：把 object-fit 写在 <img> 上，并确保它的父容器（包括 <picture></picture> 和 <img> 自身）有明确尺寸约束。
✅ 正确写法：<img> 承担 object-fit，<picture></picture> 只负责源选择
<picture><source media="(min-width: 768px)" srcset="hero-desktop.jpg"><source media="(max-width: 767px)" srcset="hero-mobile.jpg"> @@##@@ </source></source></picture>
但注意：这段代码仍可能失效——因为 <picture></picture> 默认是 inline 元素，没有宽高，height: 100% 在无基准时无效。所以必须给 <picture></picture> 或其外层容器设尺寸。
? 必须配合的容器约束（缺一不可）
-
<picture></picture>或其直接父容器要有 明确的width和height（或aspect-ratio + width） -
<img src="hero-fallback.jpg" alt="封面图" style="max-width:90%">要设width: 100%; height: 100%，才能撑满容器空间 - 推荐显式加
overflow: hidden到容器上（虽多数浏览器默认隐藏溢出，但更稳妥）
<div style="width: 320px; height: 200px; overflow: hidden;">
<picture><source srcset="wide.jpg" media="(min-width: 600px)">
@@##@@
</source></picture>
</div>
? object-fit 值怎么选？结合业务场景
cover：卡片、Banner、头图
→ 图片等比缩放填满，多余部分裁掉，焦点默认居中
→ 配合object-position: top可让头顶不被切（比如人物特写）contain：证件照、Logo、图表截图
→ 全图可见，留白也接受，不丢失任何信息scale-down：安全兜底
→ 当图片比容器小时，用原尺寸；比容器大时，等比缩小至contain效果
→ 适合不确定图片尺寸来源的场景（如用户上传头像）❌ 避免
fill：强制拉伸，必然变形，仅限特殊设计需求
⚠️ 常见失效原因排查
-
<picture></picture>外层没设高宽 → 检查 computed height 是否为 0 -
<img>的height: 100%生效不了 → 确认父级（<picture></picture>或<div>）有非 auto 的高度 <li>图片 404 或 CORS 加载失败 → <code>object-fit不会生效，先保证<img src="narrow.jpg" alt="活动海报" style="max-width:90%">能正常显示 - IE 浏览器 → 全系不支持
object-fit，需 fallback（例如改用background-image+background-size: cover）
? 兼容性降级建议（IE 友好）
<div class="img-wrapper" style="background-image: url('fallback.jpg'); background-size: cover; background-position: center;">
<!--[if !IE]><!-->
<picture>
@@##@@
</picture><!--<![endif]-->
</div>
现代项目可忽略 IE，但关键业务图建议保留基础 fallback，比如 height: auto + width: 100% 至少保比例。
不复杂但容易忽略。
