HTML Picture标签如何配合object-fit属性控制图片裁剪方式

<picture>本身不支持object-fit，必须作用于内部<img>并确保其父容器有明确宽高或aspect-ratio；cover等值才生效。

<picture> 标签本身不直接支持 object-fit，因为它是响应式图片的容器（类似 <div>），真正渲染图片的是内部的 <img> 元素。所以控制裁剪方式的关键不在 <picture>，而在它包裹的 <img> 上。

要让 <picture> 中的图片按需裁剪，核心逻辑是：把 object-fit 写在 <img> 上，并确保它的父容器（包括 <picture> 和 <img> 自身）有明确尺寸约束。

---

✅ 正确写法：<img> 承担 object-fit，<picture> 只负责源选择

<picture><source media="(min-width: 768px)" srcset="hero-desktop.jpg"><source media="(max-width: 767px)" srcset="hero-mobile.jpg"><img src="hero-fallback.jpg" style="width: 100%; height: 100%; object-fit: cover;"></picture>

但注意：这段代码仍可能失效——因为 <picture> 默认是 inline 元素，没有宽高，height: 100% 在无基准时无效。所以必须给 <picture> 或其外层容器设尺寸。

---

? 必须配合的容器约束（缺一不可）

1. <picture> 或其直接父容器要有 明确的 width 和 height（或 aspect-ratio + width）
2. <img> 要设 width: 100%; height: 100%，才能撑满容器空间
3. 推荐显式加 overflow: hidden 到容器上（虽多数浏览器默认隐藏溢出，但更稳妥）

<div style="width: 320px; height: 200px; overflow: hidden;"><picture><source srcset="wide.jpg" media="(min-width: 600px)"><img src="narrow.jpg"  style="width: 100%; height: 100%; object-fit: cover;"></picture></div>

---

? object-fit 值怎么选？结合业务场景

1. cover：卡片、Banner、头图

   → 图片等比缩放填满，多余部分裁掉，焦点默认居中

   → 配合 object-position: top 可让头顶不被切（比如人物特写）

2. contain：证件照、Logo、图表截图

   → 全图可见，留白也接受，不丢失任何信息

3. scale-down：安全兜底

   → 当图片比容器小时，用原尺寸；比容器大时，等比缩小至 contain 效果

   → 适合不确定图片尺寸来源的场景（如用户上传头像）

4. ❌ 避免 fill：强制拉伸，必然变形，仅限特殊设计需求

---

⚠️ 常见失效原因排查

1. <picture> 外层没设高宽 → 检查 computed height 是否为 0
2. <img> 的 height: 100% 生效不了 → 确认父级（<picture> 或 <div>）有非 auto 的高度
3. 图片 404 或 CORS 加载失败 → object-fit 不会生效，先保证 <img> 能正常显示
4. 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><img src="modern.jpg"style="width:100%;height:100%;object-fit:cover;"></picture><!--<![endif]--></div>

现代项目可忽略 IE，但关键业务图建议保留基础 fallback，比如 height: auto + width: 100% 至少保比例。

不复杂但容易忽略。