object-fit 通过控制图片在盒模型内的显示方式而非缩放图片本身来解决比例失真，需配合显式宽高和父容器尺寸生效；cover 模式下用 object-position 调整裁剪位置，兼容性需用 @supports 降级。
object-fit 为什么能解决图片比例失真
图片在响应式容器中拉伸变形，本质是 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）。
