background-size: cover 的裁剪与定位问题源于容器宽高比不稳定、坐标系变化及 background-origin 匹配缺失；应锁定容器比例、优先用关键词定位、设 background-origin: content-box 并确保容器高度正常。
因为 background-size: cover 的裁剪逻辑依赖容器宽高比，而移动端竖屏宽高比与图片原始比例差异大，加上 background-position 默认以容器为基准、未显式控制坐标系，导致关键内容被切掉——这不是 bug，是行为必然。
background-position 在 cover 下“调不动”是因为坐标系变了
写了 background-position: top center 却还是切头？不是值写错，而是 background-size: cover 先把图等比缩放填满容器，再在这个新尺寸的图上执行定位。此时你写的像素值（如 20px 10px）仍按容器尺寸解释，但图已缩放，实际偏移量早已失真。
- 避免混用单位：
background-position: 20% 10px中百分比按容器算、像素按原图算，坐标系打架 - 优先用关键词组合：
top center、center bottom，语义明确且不受缩放干扰 - 真要像素精控，必须配
background-size: auto或显式固定尺寸，否则“1px”对应哪一像素根本不确定
容器没稳定宽高比，cover 就没锚点可依
PC 上看着刚好，手机一转屏就乱，大概率是容器本身宽高比浮动太大。比如一个 width: 100% + height: 500px 的 div，在 iPhone 竖屏下高度远超设计预期，cover 只能猛缩图+狂裁边。
- 用
aspect-ratio: 16/9（现代浏览器）或padding-top: 56.25%（兼容方案）锁死容器比例 - 慎用
height: 100vh：Safari 地址栏收放会让vh动态跳变，改用100dvh或加min-height兜底 - 检查 computed 样式里的实际
width和height，别信声明值——浮动塌陷、margin 合并都可能导致容器高度为 0
padding 和 background-origin 不匹配，让定位基准悄悄偏移
给容器加了 padding: 20px，又没动 background-origin，那 background-position: 0 0 实际对齐的是 padding 区左上角，离内容区还有 20px 距离，看起来就像图“右下偏了”。
- 想贴文字边缘：必须设
background-origin: content-box - 同时加
box-sizing: border-box，否则 padding 会偷偷撑大容器，让背景图坐标系漂移 - 浮动子元素未清除时，父容器高度塌陷，
content-box基准直接失效——先用clearfix把高度拉回来
最常被忽略的其实是“cover 从不保证主体可见”，它只保证填满。所以调 background-position 前，先确认设计意图：是要保人脸？保 Logo？还是保底部按钮？不同目标对应不同的 background-position 锚点，而不是无脑 center。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
