object-fit 本身不解决变形，它只控制缩放方式，真正防止变形需容器有明确宽高；仅设 object-fit: cover 无效是因为浏览器无法确定容器尺寸，必须配合固定宽高、aspect-ratio 或 padding 技巧来锁定渲染空间。
直接说结论：object-fit 本身不解决变形，它只控制“怎么缩放”，真正防止变形的前提是——容器必须有明确的宽高（或可推导的高度）。
为什么只写 object-fit: cover 没反应？
浏览器根本不知道“往多大盒子里填”，object-fit 就没法算缩放比例或裁剪边界。它不是独立生效的属性，而是依赖一个可测量的渲染上下文。
-
img自身没设height，且父容器高度由内容撑开（比如纯文字 +height: auto），那object-fit形同虚设 - Bootstrap 的
img-fluid类设了max-width: 100%和height: auto，这会让图片高度随宽度浮动，反而破坏cover所需的“固定容器”前提 - Flex 或 Grid 容器里，如果子项没显式高度，又没设
align-items: stretch或min-height，容器高度可能塌陷
object-fit: cover 和 object-fit: contain 怎么选？
这不是审美选择，而是语义需求判断：
-
object-fit: cover：等比缩放后裁剪边缘，确保填满整个容器 —— 适合卡片图、轮播封面、头像框。但人脸/Logo 可能被切，得配object-position -
object-fit: contain：等比缩放后完整显示，留白补足容器 —— 适合证件照、产品细节图、图标。此时object-position影响小，因为整张图都在可视区内 -
object-fit: fill：强制拉伸填满，和不用object-fit效果一致，除非刻意要扭曲，否则一律避免
怎么给容器“锁住高度”才靠谱？
关键是要让浏览器能确定图片的渲染空间。现代写法优先用 aspect-ratio，兼容性要求高时用传统 padding 技巧：
立即学习“前端免费学习笔记（深入）”；
- 推荐（现代浏览器）：
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; }—— 固定像素高，适合卡片高度统一的场景
在 Bootstrap 卡片里怎么安全用？
别指望 card-img-top 自带高度约束。它只是样式类，不提供尺寸上下文：
- 给
<div class="card">加高度，比如style="height: 250px;"或自定义工具类h-250 - 或者给
<img>直接加class="img-cover"，再写.img-cover { height: 100%; object-fit: cover; }，但前提是父容器（如.card-img）已设高度 - 用
<picture>时，object-fit必须写在<img>上，不能只写在<picture>外层
最容易漏掉的三点：容器没锁比例、忘了配 object-position 微调焦点、在 iOS Safari 13.3 及更早版本里没降级方案。这些地方一松动，图片就立刻崩形。
