用 object-fit 控制图片缩放：cover 保持比例裁剪填充，contain 完整显示留白，fill 强制拉伸；须配合显式宽高设置容器，否则无效。
图片在手机上被拉伸或裁剪错位怎么办
直接用 img 标签在移动端显示时，宽高比不匹配就会失真——要么被横向/纵向拉长，要么关键内容被切掉。根本原因不是图片本身，而是容器尺寸和图片原始比例不一致，浏览器默认按“拉满填充”处理。
解决的核心是告诉浏览器：别硬撑，按我指定的方式对齐和缩放。最可靠、兼容性够用的方案就是 object-fit，它专为替换元素（如 img、video）设计，行为比 background-image + background-size 更可控。
-
object-fit: cover：保持比例填满容器，超出部分裁剪——适合头图、卡片图，但得提前确认主体居中 -
object-fit: contain：完整显示整张图，留白也绝不拉伸——适合证件照、图表等不允许形变的场景 -
object-fit: fill：强制拉伸填满（就是默认行为），慎用，仅当明确接受形变时才选 - 必须配合
width和height显式设置容器尺寸，否则object-fit不生效
为什么加了 object-fit 还没效果
常见失效不是属性写错了，而是被其他样式覆盖或前提条件没满足。最典型的是容器没设固定宽高，或者父级用了 flex / grid 但没约束子项尺寸。
- 检查是否遗漏了
width和height：哪怕写成width: 100%; height: 200px;也比只写一个强 - 避免父容器有
overflow: hidden却没设高度——此时cover裁剪不可见，误以为没起作用 - iOS Safari 旧版本（object-fit，若需兼容，得降级用
background-image方案，但会失去alt和 SEO 优势 - 不要在
img上同时写max-width: 100%和object-fit——前者可能干扰后者的计算逻辑
object-fit 和 background-size 的选择纠结点
两者都能控制图像填充方式，但适用边界很清晰：object-fit 是给 img 元素用的，background-size 是给背景图用的。选哪个不看效果像不像，而看语义和需求。
立即学习“前端免费学习笔记（深入）”；
- 需要
alt文本、响应式懒加载（loading="lazy"）、图片 SEO 或可访问性支持 → 必须用img+object-fit - 图片只是装饰，不需要语义、不参与文档流、要叠加渐变或伪元素 → 用
background-image+background-size: cover -
object-position可以微调裁剪区域（类似background-position），比如object-position: center top让封面图顶部对齐，避免人脸被切 - 注意
background-size的contain/cover值和object-fit同名值行为一致，但无法用 JS 获取图片原始尺寸信息
React/Vue 项目里动态图片怎么安全用 object-fit
框架里常通过 src 动态绑定图片，容易忽略加载失败或尺寸未定导致的布局抖动。这时候不能只靠 CSS，得配合逻辑兜底。
- 给
img加onLoad和onError回调，加载失败时 fallback 到占位图，避免空白或错位 - 服务端返回图片宽高信息？优先用它设置容器
aspect-ratio（如aspect-ratio: 16/9），再配object-fit，能防 FOUC - SSR 场景下，首屏图片建议内联关键 CSS，避免样式表未加载完就渲染出拉伸图
- 别在
img上写width/height属性（HTML 属性会强制拉伸），统一用 CSS 控制
真正麻烦的不是写对 object-fit，而是得同步考虑容器尺寸来源、图片加载状态、失败兜底、以及 iOS 低版本兼容成本。这些细节堆在一起，才决定一张图在用户手机上到底“看起来正常”还是“总觉得哪里不对”。
