object-fit本身不解决响应式排版中的比例问题，它只控制“怎么填”，必须配合明确容器尺寸或aspect-ratio才能生效；否则cover和contain均失效或变形。
直接说结论：object-fit 本身不解决响应式排版中的比例问题，它只管“怎么填”，不管“填多大”——没明确容器尺寸或比例约束，object-fit: cover 和 object-fit: contain 都会失效或表现异常。
为什么写了 object-fit 还是拉伸变形
常见现象：图片在卡片里被压扁、在 flex 容器中被撑高、在 Safari 里完全没反应。根本原因不是属性写错，而是浏览器找不到缩放基准。
-
img元素自身没设width或height（哪怕一个%或px），object-fit就无盒可 fit - 父容器
height: auto且没用aspect-ratio或padding-top提供比例锚点，导致内部计算失准 - flex 容器默认
align-items: stretch，子img只有width: 100%没设height，就会被强制拉满高度 - Safari ≤15.2 不支持
aspect-ratio，若你靠它兜底，object-fit实际失去尺寸来源
container 必须有可计算的宽高比
现代写法优先用 aspect-ratio 锁定容器比例，再让 img 填满它；旧浏览器 fallback 到 padding-bottom 技巧。
- 推荐组合：
.img-wrapper { aspect-ratio: 4 / 3; width: 100%; }+.img-wrapper img { width: 100%; height: 100%; object-fit: cover; } - 兼容写法：
.img-wrapper { position: relative; width: 100%; padding-bottom: 75%; }+.img-wrapper::before { content: ""; display: block; }+img绝对定位填满 - 别混用
max-width: 100%和width: 100%：Safari 旧版本会因此触发重排异常，contain表现错乱 -
video同理，必须配aspect-ratio: 16 / 9或显式width/height，否则object-fit: cover裁剪不可控
cover 和 contain 的实际选型陷阱
两者逻辑完全不同，不能凭直觉互换，选错会导致关键内容消失或视觉失衡。
-
object-fit: contain：适合证件照、图标、需完整识别的图；但容器又宽又矮时，图会缩成小点居中，用户可能以为没加载 -
object-fit: cover：适合封面、轮播、头像；但容器又高又窄时，图会被缩得极小再裁，人脸可能直接被切掉 -
object-position必须和cover或contain搭配才生效，默认center；想保人脸就写object-position: 50% 30%（垂直偏上） - SVG 或 icon font 图标不是替换元素，
object-fit对它们无效，得用background-image或viewBox控制
最常被忽略的点：IE 完全不支持 object-fit 和 aspect-ratio，老项目上线前必须检查是否 fallback 到 background-image + background-size: cover 方案，否则封面图直接拉伸变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
