background-size: cover 在手机上裁切人脸是因为竖屏宽高比与横构图背景图差异大，导致关键内容未落在 background-position: 50% 50% 的安全区内；需结合 min-height: 100dvh、background-repeat: no-repeat 和 background-position: center center 三行 css 才能稳定生效。
为什么 background-size: cover 在手机上总切掉人脸
根本不是 cover 本身有问题，而是它严格按「等比缩放 + 填满容器」执行，而手机竖屏宽高比（通常 9:16）和多数横构图背景图（如 16:9）差异太大，必然导致更多边缘被裁。你看到的“过度裁剪”，其实是关键内容没落在默认 background-position: 50% 50% 的安全区内。
-
background-size: contain先试一遍——它能完整显示整张图，帮你确认：到底是图本身构图问题，还是 cover 裁得不对 - 别依赖“居中就万事大吉”，
background-position: center center只保证图像中心对齐容器中心，不保证人脸在画面中心 - 人物偏上？改用
background-position: center top或background-position: 50% 20%（纵向 20% 处对齐容器顶部） - 底部有 CTA 按钮？用
background-position: center bottom，保脚不切鞋
移动端必须写的三行 CSS 才算真正生效
缺一不可，不是可选优化。少一行，大概率只显示图片左上角一小块，或者被重复平铺、拉伸变形。
- 容器必须有明确高度参考：
min-height: 100dvh（比height: 100vh更稳，防 Safari 地址栏收放导致 vh 动态跳变） - 禁用平铺：
background-repeat: no-repeat（否则小图或占位图会反复铺满，和 cover 冲突） - 强制锚点居中：
background-position: center center（两个center比单写center更稳妥，避免部分安卓内核解析偏差）
background-position 百分比值比关键词更可控
关键词如 top、bottom 是粗粒度锚点，实际裁剪位置受图片原始尺寸影响大；百分比值（如 30% 70%）直接对应图像坐标系，响应式下更稳定。
-
background-position: 50% 30%表示图像纵向 30% 的位置对齐容器顶部，适合人脸偏上的构图 - 避免用像素值（如
20px 40px），屏幕宽度一变，裁剪点就全乱 - 设计师说“Logo 绝对不能被切”？cover 就不该是首选——换
background-size: contain+background-color填白更稳妥
安卓软键盘弹起时背景“跳动”，不是 cover 的锅
这是布局层塌陷，不是背景图缩放问题。软键盘顶起页面，min-height: 100dvh 失效，容器高度塌缩，cover 失去参照系，图缩成左上角一小块。
- 别在
body或.container上直接设背景，用独立 wrapper：<div class="hero-bg"></div> - wrapper 加
position: relative和min-height: 100dvh，内部再嵌.container放内容 - 真机调试时，打开开发者工具 → 切换设备模拟器 → 弹出软键盘，看容器 height 是否归零
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
