object-fit是最直接解决图片比例失真的方法，支持cover、contain、fill、scale-down等值，需配合object-position精调裁剪区域，并确保img有宽高约束或aspect-ratio。
图片比例失真，通常是因为容器尺寸和图片原始宽高比不一致，又没做适配处理。用 object-fit 是最直接、最可控的解决方式，它专为替换元素（如 ）设计，能精准控制内容如何适应容器。
理解 object-fit 的常用值
object-fit 有多个取值，不同场景选不同值：
- cover：保持比例，填满整个容器，超出部分裁剪 —— 适合封面图、轮播图等强调视觉饱满的场景；
- contain：保持比例，完整显示全部内容，留白处自动出现空白（常为透明或背景色）—— 适合产品图、证件照等要求信息完整的场合；
- fill：拉伸填充，不保持比例（默认行为，慎用）；
-
scale-down：在
none和contain中选更小的呈现方式，适合不确定图片大小时兜底。
必须配合 object-position 精调显示区域
当使用 cover 时，图片会被裁剪，但默认从中心开始裁。如果想突出人物脸部、Logo 或左侧主体，用 object-position 微调：
-
object-position: center top;—— 顶部对齐，适合头像类图片； -
object-position: 20% 30%;—— 横向20%、纵向30%位置为锚点； - 支持关键词：
left/right/top/bottom/center，可组合使用，如left center。
确保 img 元素有明确的宽高约束
object-fit 不会改变容器尺寸，只影响内容渲染。若容器本身没设宽高（比如父容器是 display: inline），效果可能不生效：
立即学习“前端免费学习笔记（深入）”；
- 给
width和height（可以是固定值、百分比或aspect-ratio）； - 推荐用现代写法：
aspect-ratio: 4 / 3;+width: 100%;，让容器自带比例，再配合object-fit: cover;； - 避免只设
max-width: 100%;而不设高度，否则容易塌陷或拉伸。
兼容性提醒与简单降级方案
IE 完全不支持 object-fit，但现代项目基本无需兼容 IE。如需支持旧浏览器：
- 用
background-image替代background-size: cover / contain;和background-position； - 加一层包裹元素，用伪元素或额外 div 模拟裁剪（较重，仅作备用）；
- 多数情况下，加个
@supports (object-fit: cover) { ... }条件样式就足够清晰区分。
