如何利用CSS的object-fit属性调整响应式图片比例，避免失真？

本文共计1091个文字，预计阅读时间需要5分钟。

图片在响应式容器中可以拉伸变形，本质是 `img` 元素默认按内容尺寸缩放，而父容器宽度较高，变化后 `width: 100%; height: 100%` 会强制压缩原始宽高比。而 `object-fit` 不改变图片原始尺寸，仅控制如何把这张图放进当前框模型中，类似 `background-size` 对背景图的作用。

• object-fit: cover：保持比例，填满容器，溢出部分被剪裁（最常用）
• object-fit: contain：保持比例，完整显示，留白不可避免
• object-fit: fill：直接拉伸填满，会失真，慎用
• object-fit: scale-down：等同于 contain 或 none 中更小的那个效果

注意：object-fit 只对替换元素生效（img、video），对普通 div 里的背景图无效。

img 标签必须设宽高才能让 object-fit 生效

如果 img 没有显式设置 width 和 height（哪怕是 100%），浏览器可能无法确定其渲染盒的尺寸，导致 object-fit 表现不稳定，尤其在 flex/grid 容器中。

• 父容器需有明确尺寸（如 max-width: 100%; aspect-ratio: 16/9 或固定 height）
• img 自身至少要设 width: 100%; height: 100%（或 height: auto 配合 aspect-ratio）
• 若用 aspect-ratio，记得检查兼容性（Chrome 88+、Firefox 89+、Safari 15.4+），旧版 Safari 需用 padding-bottom hack 替代

示例：

立即学习“前端免费学习笔记（深入）”；

<div style="width: 100%; aspect-ratio: 16/9; overflow: hidden;"> <img src="photo.jpg" style="width: 100%; height: 100%; object-fit: cover;"> </div>

cover 模式下图片居中偏移怎么调？用 object-position

object-fit: cover 默认以图片中心对齐容器中心，但有时需要突出人脸、logo 或顶部信息。这时靠 object-position 微调裁剪区域的“取景框”位置。

• 值为两个长度或关键词，类似 background-position：
  object-position: center top → 裁剪框上移，显示图片上半部分
  object-position: 20% 30% → 水平 20%、垂直 30% 处对齐容器左上角
• 不支持百分比以外的相对单位（如 em、rem）在多数浏览器中表现不一致，建议用像素或纯百分比
• 动态调整时可配合 JS 修改 style.objectPosition，但要注意 SSR 场景下服务端不解析该属性

常见误操作：把 object-position 写成 position: absolute + top/left —— 这改的是整个 img 元素位置，不是内部取景框。

Safari 15.3 及更早版本不支持 object-fit 的坑

虽然现在主流浏览器基本都支持，但仍有少量用户停留在 iOS 15.3 或 macOS Monterey 早期版本，其 WebKit 内核对 object-fit 支持不完整（尤其是与 aspect-ratio 组合时会失效或回退为 fill）。

• 可用 @supports 检测并降级：

  @supports not (object-fit: cover) { img { width: 100%; height: auto; } }

• 更稳妥的做法是服务端或构建时生成带 srcset 和 sizes 的响应式 img，再配一层 CSS fallback（如用伪元素 + background-image 模拟）
• 注意：CSS-in-JS 库（如 Emotion、Styled Components）若未启用自动前缀，可能漏掉 -webkit-object-fit（虽现代已无需此私有前缀，但老项目里仍见得到）

真正容易被忽略的点是：当图片本身分辨率远低于容器尺寸时，object-fit: cover 会放大低清图，造成模糊——这不是属性问题，而是资源选型问题。得配合 srcset 提供多倍图，或者用 image-rendering: -webkit-optimize-contrast 强制锐化（仅限 Chrome/Safari）。