如何用CSS object-fit避免图片变形

object-fit: cover加了仍拉伸变形，是因为浏览器缺少可计算尺寸的容器“盒子”；必须满足三要素：容器有明确宽高（如aspect-ratio或padding-bottom）、img设width:100%+height:100%+display:block、父容器加overflow:hidden。

object-fit: cover 为什么加了还是拉伸变形

不是属性写错了，是浏览器根本没“盒子”可填——object-fit 只决定图片怎么装进已知尺寸的容器，容器本身没尺寸，它就完全不工作。

常见失效场景包括：

1. img 只设了 width: 100%，但没设 height、aspect-ratio，也没用 padding-bottom 模拟高度 → 图片按原始尺寸撑开容器
2. 父容器是 display: flex 或 grid，子项未设 min-height 或 height: 100%，加载中时高度塌陷为 0
3. 用了 float 但没清除，父容器高度为 0，img 实际脱离文档流渲染
4. Bootstrap 的 img-fluid 类含 height: auto，和 object-fit: cover 冲突，必须显式覆盖

必须配齐的三个硬性条件

object-fit: cover 要可靠生效，这三点缺一不可：

1. 容器（img 自身或其父元素）要有可计算的宽高：推荐 aspect-ratio: 16 / 9 + width: 100%；老浏览器 fallback 用 padding-bottom: 56.25% + position: relative
2. img 需设 width: 100% + height: 100%（或 height: auto 配合容器锁高），并加 display: block 消除行内基线间隙
3. 父容器记得加 overflow: hidden，否则裁剪部分可能溢出边框

cover 和 contain 到底怎么选

这不是视觉偏好，而是语义需求判断：

1. object-fit: cover：等比缩放后裁剪边缘，确保填满整个容器 → 适合卡片图、轮播封面、头像框。但默认 object-position: center center 可能切掉人脸，必须配 object-position: center top 等微调
2. object-fit: contain：等比缩放后完整显示，留白补足容器 → 适合证件照、产品细节图、图标。此时 object-position 几乎无效，因为整张图都在可视区内
3. object-fit: fill（默认值）：强制拉伸填满，破坏宽高比。除非刻意做故障艺术，否则一律避免

Safari 13.3 及更早版本兼容性怎么处理

iOS Safari 13.3 及之前完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 前缀也无效，会退化成 fill 行为（即拉伸）。

稳妥降级方案：

1. 用背景图替代：background-image + background-size: cover，但失去 img 的语义化和 SEO 优势
2. 引入 polyfill（如 object-fit-images），仅在检测到不支持时加载
3. 对关键场景（如头像）做服务端裁剪，返回固定比例图片，规避前端适配问题

真正容易被忽略的点是：你写的每一条 object-fit 规则，背后都依赖一个稳定、可测量的渲染上下文——这个“框”必须由你亲手定义，浏览器不会替你算。