object-fit本身不解决变形，仅控制缩放方式；生效前提是容器有明确宽高（如width:100%;height:200px;）或aspect-ratio，否则cover/contain均失效。
直接说结论：object-fit 本身不“解决”变形，它只控制缩放方式；真正防止变形的前提是容器有明确宽高（或可推导的高度），否则 object-fit: cover 或 object-fit: contain 都不会生效。
为什么加了 object-fit 还是拉伸变形？
最常见原因不是属性写错，而是浏览器根本没“盒子”可填——img 没设 height，父容器又靠内容撑高，导致渲染时宽高比失控。
- 检查是否遗漏了显式宽高：哪怕
width: 100%; height: 200px;也比只写width: 100%;强 - 避免和
max-width: 100%+height: auto共存，后者会覆盖object-fit的计算逻辑 - Flex/Grid 容器中，子项若没设
height且父容器没设min-height或align-items: stretch，高度可能塌陷 - iOS Safari 13.3 之前不支持
object-fit，需降级用background-image+background-size: cover（但会丢失alt和懒加载）
object-fit: cover 和 object-fit: contain 怎么选？
这不是视觉偏好问题，而是语义与场景强绑定：
-
object-fit: cover：等比缩放后裁剪边缘，填满容器 → 适合卡片图、轮播封面、头像。必须配object-position微调裁剪锚点（如人脸偏上就写object-position: center top） -
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; }—— 固定像素高，适合卡片高度统一的场景
object-fit 和 background-size 能混用吗？
不能。它们作用对象完全不同，混用等于白写：
-
object-fit只对替换元素生效（img、video、iframe），对background-image完全无效 - 有人给
div写background-image: url(...); object-fit: cover;，浏览器直接忽略，控制台也不报错，图就静静躺在左上角 - 需要
alt文本、loading="lazy"、SEO 或可访问性 → 必须用img+object-fit - 只是装饰、要叠加伪元素或渐变遮罩 → 用
background-image+background-size: cover
最易被忽略的一点：裁剪不是 bug，是 cover 的设计意图。如果图片原始比例和容器差异极大，边缘裁切量会变多——这时该调整的是容器宽高比或 object-position，而不是怀疑 object-fit 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
