object-fit / object-position——图片不变形的新姿势

先上一段让你 UI 被吐槽的“图片变形”代码：

<!-- 设计师给了一张宽图，你塞进了一个方形容器里 -->
<img src="wide-banner.jpg" width="200" height="200" />
<!-- 图片被压扁了，比例完全不对 -->

设计师给的是 16:9 的图，你要显示在 1:1 的框里。直接设置宽高，图片被拉扁了。用 background-image 做背景图，但又没法用 <img> 的语义（SEO 吃不到、懒加载不好做）。用 overflow: hidden + 外层容器，又得额外套一层 div。

object-fit 一行 CSS 解决：

img {
    width: 200px;
    height: 200px;
    object-fit: cover;  /* 填满容器，保持比例，超出裁剪 */
}

不用额外套容器，不用 JS 计算，原生 <img> 保留语义。今天把 object-fit 和 object-position 的用法一次讲清楚。

先搞清楚 object-fit 是什么

object-fit 告诉浏览器”图片怎么填满容器”——是拉伸适配、保持比例、还是不缩放？

它只对替换元素生效（如 <img>、<video>），对普通 div 无效。

另外要有可计算的显示框尺寸（常见是同时约束宽和高，或用 aspect-ratio + 一侧尺寸），效果才明显。

1. 三个常用值

cover：填满容器，裁剪溢出

/* 头像：正方形容器 + 圆形裁剪 */
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

contain：完整显示，留白

/* 商品图：显示完整商品，留白也接受 */
.product-img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: #f5f5f5;
}

scale-down：防止放大失真

/* 小图标不放大，保持清晰度 */
.icon {
    width: 100px;
    height: 100px;
    object-fit: scale-down;
}

2. object-position：控制图片的显示位置

object-position 控制图片在容器里的对齐位置，类似 background-position。当使用 cover 或其他会产生裁剪的值时，可以控制显示哪一部分。

/* 对齐方式 */
img {
    object-fit: cover;
    object-position: top left;     /* 从顶部左侧对齐 */
    object-position: center;        /* 居中（默认） */
    object-position: bottom right;  /* 从底部右侧对齐 */
}

/* 精确偏移 */
img {
    object-position: 30% 20%;      /* 对象的 30%/20% 定位点与容器同名定位点对齐 */
    object-position: 50px 20px;    /* 对象左上角相对容器左上角偏移 (50px, 20px) */
}

3. 浏览器兼容性

• ‎Chrome 32+、Firefox 36+、Safari 10+、Edge 79+
• ‎所有现代浏览器完整支持，可放心使用

小结

• ‎object-fit：控制图片怎么填满容器（cover 填满裁剪、contain 完整留白、scale-down 防止放大）
• ‎object-position：控制图片在容器里显示的位置（center、top left、百分比、像素值）
• ‎cover 搭配 border-radius: 50% 做圆形头像
• ‎contain 搭配 background: #f5f5f5 做商品图预览
• ‎scale-down 用于响应式图片，防止小图被放大失真
• ‎原生 标签保留语义，SEO 友好，支持懒加载

一句话：object-fit + object-position 让 <img> 拥有了 background-image 一样的控制能力，同时保留语义、SEO 和懒加载。无论什么尺寸的图片，都能优雅地填充容器而不变形。