用 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 但没约束子项尺寸。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 检查是否遗漏了 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 低版本兼容成本。这些细节堆在一起，才决定一张图在用户手机上到底“看起来正常”还是“总觉得哪里不对”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！