object-fit本身不防止变形，仅控制图片在已有盒子中的缩放或裁剪方式；真正防止变形的前提是容器必须有明确、可计算的宽高或aspect-ratio，否则cover/contain均失效。
object-fit 本身不防止变形，它只控制“图片在已有盒子中怎么缩放或裁剪”；真正让图片不变形的前提是：盒子必须有明确、可计算的宽高（或 aspect-ratio）。
为什么加了 object-fit: cover 还是拉伸变形？
浏览器根本不知道“盒子多大”，object-fit 就没法算缩放比例或裁剪边界。常见失效场景包括：
-
img只设了width: 100%，但没设height或aspect-ratio，高度由原始图片撑开 - 父容器用了
float且未清除，导致高度塌陷为 0 - Flex/Grid 容器中子项未设
min-height或height: 100%，容器高度未约束 - 用了 Bootstrap 的
img-fluid类（含height: auto），和cover冲突
怎么给容器“锁住尺寸”才真正生效？
关键是要让浏览器能确定图片的渲染空间。现代写法优先用 aspect-ratio，兼容性要求高时用传统 padding-bottom 技巧：
- 推荐（现代浏览器）：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }—— 不依赖父容器高度，自身维持比例 - 兼容写法（含 Safari 13.3–）：父容器设
position: relative; padding-bottom: 56.25%，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 简单粗暴但有效：
img { width: 100%; height: 200px; object-fit: cover; }—— 固定像素高，适合卡片高度统一的场景
cover 和 contain 到底该选哪个？
这不是审美选择，而是语义需求判断：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后裁剪边缘，确保填满整个容器 —— 适合卡片图、轮播封面、头像框。但人脸/Logo 可能被切，必须配object-position -
object-fit: contain：等比缩放后完整显示，留白补足容器 —— 适合证件照、产品细节图、图标。此时object-position影响极小 -
object-fit: fill：强制拉伸填满，破坏宽高比。除非刻意做故障艺术，否则一律避免
容易被忽略的三个硬性条件
object-fit: cover 要可靠生效，这三点缺一不可：
- 容器或
img自身必须有可计算的宽高（如width: 100%; height: 100%，或width: 100%; aspect-ratio: 4 / 3） -
img最好设为display: block，避免行内默认间隙干扰高度 - 父容器需加
overflow: hidden，否则裁剪部分可能溢出
真正复杂的地方不在 object-fit 本身，而在于你是否意识到：一旦用了 float、display: contents 或 SSR 首屏未加载完成，那个“盒子”就可能瞬间消失——这时候再调 object-position 也没用。
