object-fit: cover 失效主因是容器无稳定尺寸，需设外层容器aspect-ratio、移除img宽高属性、加overflow:hidden，并处理flex/grid的align-items与flex-shrink。
加了 object-fit: cover 还是拉伸变形，90% 是因为图片容器没稳定尺寸——object-fit 不是魔法，它只在“有明确盒子”的前提下生效。
为什么 object-fit 设了却没反应？
浏览器根本不知道要按什么尺寸缩放。常见失效场景包括：
-
img只写了width: 100%，没设height或aspect-ratio，高度由图片原始尺寸撑开 - 父容器是
grid或flex，但没约束子项最小尺寸，min-height: auto压制了比例计算 - HTML 中残留了
width和height属性（比如 CMS 输出的），它们优先级高于aspect-ratio - 用了
display: contents或float未清除，导致容器高度塌陷为 0
aspect-ratio 必须写在容器上，不是 img 上
直接给 img 写 aspect-ratio: 16 / 9 几乎总是无效，因为 img 是替换元素，浏览器优先尊重其 HTML 属性或固有宽高比。
正确做法是：
- 移除
img标签上的width和height属性（或只保留一个） - 在外层容器（如
.grid-item或.card-img）上设aspect-ratio: 4 / 3 - 该容器必须有宽度来源：比如
width: 100%、max-width: 600px或flex: 1 -
img写width: 100%; height: 100%; display: block; object-fit: cover; - 容器加
overflow: hidden，否则裁剪内容会溢出到相邻格子
Flex/Grid 容器中图片被强行拉高或压扁？检查 align-items 和 flex-shrink
默认的 align-items: stretch 和 flex-shrink: 1 是罪魁祸首——它们会无视 aspect-ratio 强行撑开或压缩图片盒子。
必须同步处理两层：
- 给
img加flex: 0 0 auto（等价于禁止缩放 + 自适应基线） - 确保其直接父容器（即设了
aspect-ratio的那个元素）有min-width: 0和min-height: 0 - 避免父容器设
height或align-items: stretch；改用align-items: center; justify-content: center;配合object-fit: contain
旧版 Safari 兼容性问题怎么绕过？
Safari 15.3 及更早版本不支持 aspect-ratio，容器会塌陷。别硬扛，用经典 padding-bottom 技巧：
- 父容器设
position: relative; padding-bottom: 75%（对应 4:3） -
img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 记得加
overflow: hidden到父容器上，不然绝对定位的图可能溢出
真正容易被忽略的不是写法，而是图片分辨率本身——高 DPR 屏下，固定像素高度（如 height: 200px）会让图变糊；优先靠比例控制，而不是硬写 px 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
