加了 object-fit: cover 仍变形，是因为容器无明确宽高比或高度基准，object-fit 需依赖可计算的“盒子”才能裁剪；必须配合 aspect-ratio、固定高度或 padding 技巧锁定比例，并设 display: block 和 overflow: hidden 才生效。
加了 object-fit: cover 还是变形？不是属性写错了，而是浏览器压根没“盒子”可适配——object-fit 本身不定义尺寸，只管内容怎么填框；没框，它就完全不工作。
为什么 object-fit: cover 在小屏下看起来没效果
最常见原因是图片容器没有可计算的高度。比如只写了 width: 100%，但 height 是 auto 或未声明，浏览器就按图片原始高度撑开容器，object-fit 失去裁剪基准。
- Flex 容器中子项未设
min-height或aspect-ratio，加载中或空内容时高度塌陷 -
float未清除，父容器高度为 0，图片实际渲染在文档流外 - 用了
max-width: 100%+height: auto（响应式图片经典写法），但它和cover冲突：前者让高度浮动，后者要固定框 - iOS Safari 13.3 及更早版本不支持
object-fit，加-webkit-object-fit: cover也无效，会退化成拉伸行为
怎么给容器“锁住比例”，让 object-fit 真正生效
关键不是给 <img> 设尺寸，而是确保它所处的渲染空间有明确宽高比。现代写法优先用 aspect-ratio，兼容性要求高时 fallback 到 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; }—— 注意别和max-width混用
object-fit: cover 和 object-fit: contain 到底该选哪个
这不是“好不好看”的选择，而是由内容语义决定的：要不要保证全部可见？
-
object-fit: cover：适合封面图、头像、轮播图——必须填满、允许裁剪。但默认object-position: center center可能切掉人脸，记得配object-position: center top或20% 30% -
object-fit: contain：适合证件照、产品主图、图标——必须完整显示，留白可接受。此时object-position影响很小，因为整张图都在框内 -
object-fit: fill：等同于不写object-fit，会拉伸变形，除非刻意做故障效果，否则一律避免 -
object-fit: scale-down：适合组件库里不确定图源尺寸的场景，自动在none和contain中选更小的那个
容易被忽略的硬性条件：三要素缺一不可
很多人调通 object-fit 就以为万事大吉，但真正出问题的常是“画什么”，而不是“怎么画”。以下三点必须同时满足：
- 容器或
img自身必须有可计算的宽高（如width: 100%; height: 100%，或width: 100%; aspect-ratio: 4 / 3） -
img最好设为display: block，避免行内默认间隙干扰高度 - 父容器需加
overflow: hidden，否则裁剪部分可能溢出
真正复杂的地方不在 object-fit 本身，而在于你是否意识到：一旦用了 float、display: contents 或 SSR 首屏未加载完成，那个“盒子”就可能瞬间不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
