object-fit生效前提是有可计算的容器宽高；仅设width:100%或max-width:100%;height:auto会导致失效；推荐用aspect-ratio+width/height:100%配合object-fit:cover/contain及object-position精准控制裁剪与对齐。
object-fit 本身不固定盒子尺寸，只管图片怎么装进去
加了 object-fit: cover 或 object-fit: contain 却发现图片还是拉伸、溢出、或容器高度塌陷——这不是 object-fit 失效，而是你误把它当成了“自动撑容器”或“强制约束尺寸”的工具。它只在容器已有明确宽高（或可计算宽高）的前提下起作用；容器没尺寸，它就完全不触发。
常见错误包括：
-
img只写了width: 100%，但没设height，也没用aspect-ratio锁定父容器比例 - 父容器是
display: flex，但没设height，导致子项按内容撑高，object-fit失去参照系 - 用了
max-width: 100%; height: auto—— 这会覆盖object-fit的尺寸控制逻辑，让浏览器退回到原始渲染行为
必须显式提供“盒子”，才能让 object-fit 生效
要让 object-fit 稳定工作，容器（或 img 自身）必须有可计算的宽高。现代写法首选 aspect-ratio，它比 padding-bottom 更语义清晰、更易维护。
推荐组合（以卡片头像为例）：
立即学习“前端免费学习笔记（深入）”；
- 给包裹
img的容器设aspect-ratio: 1 / 1和width: 100% -
img设width: 100%; height: 100%; display: block; object-fit: cover; - 如果父容器是 flex/grid，额外加
align-items: center; justify-content: center防止对齐偏移
不要只写：.avatar img { object-fit: cover; } —— 没有盒子，这行代码等于没写。
cover 和 contain 的行为差异直接影响留白与裁剪位置
object-fit: cover 等比缩放后裁剪边缘，确保填满；object-fit: contain 等比缩放后完整显示，可能留白。但二者都依赖 object-position 控制“裁哪”或“居哪”。
关键点：
- 默认
object-position: 50% 50%（居中），但若图片顶部重要（如人脸），可改用object-position: center top - 在
contain场景下，留白出现在容器内部；若留白跑到容器外，说明容器本身没设overflow: hidden或高度失控 -
cover下若关键内容总被裁掉，不是属性问题，而是图片构图没适配目标比例，需前端提示用户或后端预处理
Safari 13.3 及更早版本不支持 aspect-ratio，降级方案要提前准备
如果你的项目还需兼容 Safari 13.3（iOS 13.3 / macOS 10.15.3），aspect-ratio 会失效，此时必须用传统 padding-bottom 技法或 background-image 替代。
可行降级方式：
- 用
@supports not (aspect-ratio: 1 / 1)包裹老方案 - 对容器设
position: relative，再用::before伪元素 +padding-bottom: 100%模拟比例 - 直接放弃
img，改用background-image+background-size: cover，但会牺牲语义和 SEO
最常被忽略的一点：object-fit 的生效前提是「容器尺寸可计算」，而这个前提在响应式嵌套、flex/gird 深度布局、以及 SSR 渲染初期极易被破坏。别只盯着属性值是否写对，先检查 DevTools 里那个盒子的真实 height 是多少。
