object-fit必须配合明确宽高才能生效，否则无作用；常见错误是只设object-fit却未给img或其父容器设置width和height，导致尺寸塌陷或flex压缩，正确做法是显式设定尺寸或使用aspect-ratio锁定比例。
直接说结论：object-fit 必须配合明确的宽高才能生效，否则它什么都不会做——不是浏览器不支持，而是没尺寸可“fit”。
为什么设置了 object-fit: cover 但图片还是被拉伸？
常见错误是只写 object-fit，却忘了给 <img> 或其父容器设 width 和 height。比如：
-
<img src="a.jpg">默认是width: auto; height: auto，此时object-fit没作用对象 - 父容器用
flex或grid布局但没约束尺寸（如没设min-height或aspect-ratio），<img>实际渲染尺寸仍为 auto - 用了
max-width: 100%却没配height: auto或固定高度，导致高度塌陷
正确做法：要么给 <img> 显式设 width 和 height（如 width: 100%; height: 300px），要么让父容器有确定尺寸（例如 .card { aspect-ratio: 4/3; width: 100%; }）。
contain 和 cover 的实际裁剪边界在哪？
object-fit 本身不控制裁剪位置，只决定缩放策略；裁剪区域由 object-position 决定，默认是 50% 50%（居中）。这意味着：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover时，图片居中裁剪——关键内容（如人脸）若偏左或偏上，可能被切掉 -
object-fit: contain时，object-position影响的是图片在留白区域内的对齐方式（比如object-position: top left会让图片贴左上角显示） - 想确保某部分不被裁，得结合
object-position调整，例如人物头像常用object-position: center top避开肩膀被切
响应式场景下怎么避免关键内容被裁？
纯靠 object-fit: cover 在小屏上风险很高，尤其当图片构图不居中时。更稳妥的做法是：
- 服务端提供多尺寸图 +
srcset，让浏览器按视口选最接近比例的源图，减少裁剪量 - 用
aspect-ratio锁定容器比例（如aspect-ratio: 16/9），再配object-fit: cover，比用固定height更可靠 - 对重要图片（如产品主图、头像），优先用
contain+ 背景色填充留白，而不是硬裁 - 测试时别只看桌面端——真机上拖动页面检查裁剪是否切掉文字、Logo 或人脸眼睛
最容易被忽略的一点：很多框架（如 Bootstrap 的 .img-fluid）会重置 height 为 auto，这直接废掉 object-fit 效果。必须手动覆盖或换用带尺寸约束的 class。
