background-size: cover 是比例裁剪的起点，它等比缩放图片使至少一边撑满容器并裁剪溢出部分；实际裁剪比例由容器宽高比与 background-position 共同决定，而非 cover 自身可设数值。
background-size: cover 是比例裁剪的起点，不是可调参数
你不能用 background-size 直接指定“裁剪成 16:9”或“只显示中间 70%”，它没有比例数值接口。cover 的行为是固定的：等比缩放图片，让宽或高至少一边撑满容器，另一边自然溢出并裁剪。所谓“比例裁剪”，其实是靠容器自身的宽高比 + background-position 共同决定最终可见区域。
想控制具体显示哪一部分，必须配 background-position
cover 默认从左上角（0 0）开始铺图，关键内容容易被切掉。要确保人脸、Logo 等居中可见，必须显式写：
-
background-position: center center—— 最常用，垂直水平居中 -
background-position: center top—— 适合横幅图，保留顶部主体，多裁底部 -
background-position: 30% 40%—— 手动微调锚点，百分比基于图片自身尺寸，不是容器
注意：background-position 只在 background-size: cover 或 contain 下才有意义；单写 no-repeat 不会定位。
容器宽高比决定最终“裁剪比例”的视觉结果
真正影响你看到多少内容的，是容器本身的宽高比。比如：
- 设
min-height: 100vh+ 宽度随屏幕变化 → 实际裁剪比例随设备变（桌面横屏裁上下，手机竖屏裁左右） - 设固定宽高比容器：
aspect-ratio: 16 / 9或用padding-top: 56.25%→ 裁剪区域稳定为 16:9 - 用
aspect-ratio: 4 / 3+background-size: cover+background-position: center→ 图片始终按 4:3 框裁剪
别指望 background-size 自己“算出 16:9”，它只负责缩放逻辑；比例来自你给容器的约束。
移动端真机调试时，优先检查三件事
你调好了 cover 和 center，但图还是偏了、少了、没铺满？大概率不是参数错，而是：
-
body或父容器漏了min-height: 100vh，内容少时容器塌陷，背景无处可铺 - 图片路径 404，浏览器静默回退为纯色背景，你以为裁切异常，其实图根本没加载
- 用了
background-attachment: fixed—— iOS Safari 在滚动时可能渲染丢失或错位，尤其配合 JS 动效时
真机上打开开发者工具，直接看 computed styles 里的 background-image 是否生效、height 是否为 100vh、父级是否意外带 overflow: hidden，比反复调 background-position 更快定位问题。
