background-size: cover 本身不拉伸图片，仅等比缩放加裁剪；所谓“拉伸”实为写法冲突、容器失高、background-position 未配准等导致的视觉错觉。

background-size: cover 本身就不会拉伸变形——它只做等比缩放加裁剪。你看到的“拉伸”，100%是写法冲突、容器失高，或 background-position 没配准导致的视觉错觉。

为什么写了 cover 还是看起来被拉伸了

根本不是图片被拉伸，而是你看到的部分被裁得不对。常见真实原因：

• background-size: 100% 100% 和 cover 同时存在，前者优先级更高（尤其在内联样式或 !important 覆盖时）
• 父容器 height 是 auto 或未设置，cover 失去参照系，浏览器按内容高度缩放，图缩成左上角一小块
• background-position 没显式声明，旧版 iOS Safari 或某些安卓 WebView 会回退到 0% 0%（左上角），人物直接被切掉半张脸
• 用了 background-attachment: fixed 却没配 background-position，Safari 滚动时重绘异常，局部出现“拉伸抖动”假象

移动端必须写的三行 CSS 才算真正生效

缺一不可，不是可选优化：

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

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

下载

• 容器必须有明确高度参考：min-height: 100dvh（比 height: 100vh 更稳，防 Safari 地址栏收放导致 vh 动态跳变）
• 禁用平铺：background-repeat: no-repeat（否则小图会被重复铺满，和 cover 冲突）
• 强制锚点居中：background-position: center center（两个 center 比单写 center 更稳妥，避免部分安卓内核解析偏差）

关键内容总被裁？别硬扛 cover，改用 background-position 精控裁剪区域

cover 的裁剪逻辑是机械的：等比放大后居中覆盖。你要的不是“不裁”，而是“裁对地方”。

• 人物/标题在图上方 → 改用 background-position: center top 或 background-position: 50% 20%（图像纵向 20% 处对齐容器顶部）
• 底部有按钮/CTA → 用 background-position: center bottom，保脚不切鞋
• 避免像素值（如 20px 40px），响应式下完全失控；百分比（如 30% 70%）或关键词更稳
• 如果设计师强调“人脸绝对不能被切”，cover 就不该是首选——换 background-size: contain + background-color 填白更稳妥

安卓软键盘弹起时背景“跳动”，cover 不背这个锅

这是布局层塌陷，不是背景图缩放问题。软键盘压缩视口高度，触发重排，body 高度计算错位，导致背景渲染区域突变。

• 别给 body 设 position: fixed——它会让整个页面脱离文档流，iOS 下尤其容易出问题
• 不要在 body 或 .container 上直接设背景，用独立 wrapper：<div class="hero-bg"></div>
• wrapper 加 position: relative 和 min-height: 100dvh，内部再嵌放内容

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