object-fit 能修复图片变形，但仅在父容器有明确宽高或 aspect-ratio 时生效；cover 裁剪填满，contain 等比留白，fill 会拉伸变形，scale-down 取 contain 或 none 中较小者。
图片在容器里被拉宽或压扁，object-fit 真的能直接修？
能，但得看容器有没有固定宽高。如果父容器是 width: 100%; height: auto; 这种“随内容伸缩”的写法，object-fit 就没效果——它只在**有明确尺寸限制的容器**里才起作用。常见场景比如卡片封面、头像区域、轮播图容器，这些地方通常会设 height 或 aspect-ratio。
object-fit: cover 和 object-fit: contain 到底差在哪？
关键区别在“要不要填满容器”和“保不保原图比例”：
-
cover：强制填满容器，按比例缩放后裁剪溢出部分（常用于封面图） -
contain：完整显示整张图，按比例缩放后留白（适合证件照、图标等不能裁剪的场景） -
fill（慎用）：直接拉伸填满，完全不保比例，就是你看到的“变形”本身 -
scale-down：等同于contain或none中更小的那个，一般不用主动设
为什么加了 object-fit 还是没反应？检查这三点
新手最容易卡在这几个隐形前提上：
- 图片必须是
background-image不认object-fit（要用background-size） - 父容器必须有明确的
width和height（或aspect-ratio），否则浏览器不知道“要fit到哪去” -
display: inline;，可能受换行符或空格影响高度；建议加display: block;或vertical-align: top;
一个可靠的小例子：固定宽高的卡片图
假设你要做一个 200×150 的商品图卡片，不管原始图是横图还是竖图都要整齐显示：
立即学习“前端免费学习笔记（深入）”；
.card-img {
width: 200px;
height: 150px;
object-fit: cover;
display: block;
}
如果想让所有图都完整可见且居中，把 cover 换成 contain 即可。注意：此时上下/左右可能出现空白，这是正常行为，不是 bug。
真正容易被忽略的是——object-fit 不解决加载前的布局抖动。如果图片尺寸未知，页面渲染时容器可能先塌陷再撑开。这时候得配合 aspect-ratio 或服务端传尺寸做占位，不然用户眼睛会“闪一下”。
