object-fit: cover 失效的根本原因是容器无宽高或 img 高度未设为 100%；必须同时满足：容器有可计算尺寸（如 aspect-ratio: 1/1）、img 设 width: 100% + height: 100% + display: block、父容器 overflow: hidden。
object-fit: cover 能防止头像拉伸，但只加这一行 CSS 几乎总是失效——因为浏览器根本没“盒子”可装图。
为什么头像加了 object-fit: cover 还是被压扁？
根本不是属性写错了，而是头像容器高度为 0 或不可计算：
-
img只设了width: 100%，但height是auto（比如用了 Bootstrap 的img-fluid）→ 容器靠图片原始尺寸撑高，object-fit失去作用基准 - 父容器是
display: flex，子项没设min-height或height: 100%→ 加载中或空状态时高度塌陷 - 忘了给
img加display: block→ inline 默认基线留白，导致实际高度比预期多出几像素，干扰裁剪 - 在 Grid/Flex 项上写了
object-fit，但它只对<img alt="怎么在CSS中利用object-fit防止用户头像变形拉伸？" >、<video></video>等替换元素生效，对普通<div> 无效 <h3>必须同时满足的三要素</h3> <p>缺一不可，否则 <code>object-fit: cover静默不执行：- 容器（
img自身或其父元素）要有可计算宽高：width: 100%+aspect-ratio: 1 / 1（✅ 推荐），或老浏览器 fallback 用padding-bottom: 100%+position: relative -
img本身需设width: 100%+height: 100%（不能是height: auto），并加display: block - 父容器加
overflow: hidden，否则裁剪溢出部分会显示出来
怎么避免人脸被切掉？
object-fit: cover默认从center center裁剪，而多数头像关键区域偏上（眼睛、额头）。必须显式配object-position：
Kibana Saved Objects下载通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
立即学习“前端免费学习笔记（深入）”；
- 通用安全值：
object-position: center top（把裁剪锚点移到顶部中心，保全脸部） - 更精细控制：
object-position: 50% 20%（横轴居中，纵轴向上偏移 20%，适合小尺寸头像） - 左对齐头像（如企业通讯录）：
object-position: left top - 别依赖默认值——只要用了
cover，就必须检查裁剪是否合理，真机测试时尤其注意 iOS Safari
iOS Safari 13.3 及更早版本怎么办？
这些版本完全不支持
object-fit在<img alt="怎么在CSS中利用object-fit防止用户头像变形拉伸？" >上生效，加-webkit-object-fit也无效，会退化成fill（即拉伸）：- 关键场景（如用户资料页）：服务端返回固定比例（如 1:1）图片，前端只设
width/height，绕过适配逻辑 - 非关键场景：用
@supports (object-fit: cover)包裹样式，降级方案用background-image+background-size: cover，但会丢失alt和原生懒加载 - polyfill（如
object-fit-images）仅在检测到不支持时动态加载，但增加 JS 体积和首屏延迟
最常被忽略的一点：你写的
object-fit: cover很可能根本没执行——因为父容器高度是 0，或者img的height是auto，又或者你在 Flex/Grid 容器里忘了给子项加min-height。先确认尺寸存在，再谈缩放。 - 容器（
