加 object-fit 本身不解决问题，必须同时给 或其父容器设明确的 width 和 height（或 aspect-ratio），否则它完全不生效；常见失效原因是容器无确定尺寸，导致浏览器无法计算缩放裁剪。
直接结论：加 object-fit 本身不解决问题，必须同时给 <img> 或其父容器设明确的 width 和 height（或 aspect-ratio），否则它完全不生效。
为什么写了 object-fit: cover 还是拉伸变形
最常见失效原因不是语法错，而是浏览器根本“不知道容器有多大”。object-fit 不是开关，它需要一个有确定尺寸的盒子才能计算怎么缩、怎么裁。
- 只写
img { object-fit: cover; }→ 没宽高，等于没写 - 写了
width: 100%但没设height→ 纵向无约束，依然拉伸 - 父容器用了
float或display: contents导致高度塌陷 → 子<img>实际渲染高度为 0 - Bootstrap 的
img-fluid含height: auto，和object-fit冲突，必须覆盖掉
选 cover 还是 contain 取决于你要保内容还是保全貌
两者都保持原始比例，但策略相反：
-
object-fit: cover：等比缩放后填满整个容器，超出部分裁剪 → 适合头图、卡片缩略图，但人脸可能被切，需配合object-position微调 -
object-fit: contain：等比缩放后完整显示，留白由背景色填充 → 适合证件照、UI 图标、图表，但卡片高度会因图片比例不同而跳变 -
object-fit: fill：就是默认拉伸行为，慎用；除非你明确接受形变（比如纯装饰性 banner）
别凭感觉选，先问自己：这张图里哪部分绝对不能丢？如果答案是“整张图”，选 contain；如果是“中间那个人”，选 cover 并加 object-position: center top 避开裁切风险区。
在 Grid / Flex / 浮动布局里特别容易踩坑
这些布局本身不自动给子项设尺寸，object-fit 在它们里面极易失效：
- Grid item 必须有明确高度，比如
height: 200px或aspect-ratio: 4 / 3；仅靠grid-template-rows: 1fr不够 - Flex item 若设了
align-items: stretch，但父容器没高度，子项仍无渲染尺寸 - 浮动布局中，父容器未清除浮动 → 高度塌陷 →
object-fit失效；必须同时处理清除浮动和显式设高 - 用
cover时，记得给父容器加overflow: hidden，否则裁掉的部分会溢出破坏布局
移动端和旧版 Safari 的兼容性现实
iOS Safari 10.3+ 支持 object-fit，但更老版本（如 iOS 9）完全不支持。如果你的用户仍有这部分流量：
- 不要硬上
object-fit单一方案 - 降级用
background-image+background-size: cover，但要接受丢失alt、无法懒加载、SEO 削弱 - 可以用 @supports 检测：
@supports (object-fit: cover) { ... }，把 fallback 写在外部 - React/Vue 中动态图片加载时，初始尺寸未定会导致布局抖动，建议配
loading="lazy"+ 容器占位（如aspect-ratio）
真正难的不是写对那一行 CSS，而是判断：这张图是否值得为旧设备多维护一套 background 方案？很多时候，答案是否定的——该砍就砍，别让兼容性绑架语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
