background-size: cover 的本质是按比例缩放并裁剪背景图以完全覆盖容器，而非拉伸变形；裁剪位置由 background-position 控制，默认居中，可设为 top、bottom 等值或百分比精调。
background-size: cover 的本质就是裁剪
它不是 bug，是设计行为。cover 的目标是「让背景图完整覆盖容器，且不拉伸变形」，为此必须按比例缩放图片，再居中截取——超出容器的部分自然被裁掉。常见误解是以为它会“适配可见区域”，其实它适配的是容器的宽高比，而非内容可视区。
典型现象：background-size: cover 用在手机竖屏页面时，顶部/底部常被切掉；用在横屏 banner 上，左右被切。这不是 CSS 失效，而是缩放后图像中心对齐、溢出裁剪的结果。
怎么控制裁剪位置？用 background-position
background-position 决定裁剪“从哪一段取景”。默认 center center（居中），但你可以显式指定，比如想保全人脸，就设成 center top 或具体像素值。
- 常用值：
top（上边缘对齐，裁剪底部）、bottom（下边缘对齐，裁剪顶部）、left（左对齐，裁剪右边） - 组合写法：
background-position: 20% 30%表示横向 20%、纵向 30% 的位置对齐容器左上角 - 注意：百分比是相对于图片自身尺寸计算的，不是容器 —— 所以
50% 50%等价于center center
不想裁剪？换用 contain 或 object-fit（仅限 img 元素）
background-size: contain 保证整张图完整显示，但可能留白；如果背景图是 <img> 标签而非 CSS 背景，则应改用 HTML + object-fit: cover，它行为类似但作用对象不同，且支持 object-position 精细控制裁剪点。
立即学习“前端免费学习笔记（深入）”；
-
contain：等比缩放至完全可见，适合证件照、图标类场景 -
object-fit: cover必须配合<img>使用，不能用于background-image - 浏览器兼容性：IE 不支持
object-fit，但所有现代浏览器都支持background-size: cover和background-position
响应式下裁剪结果不稳定？检查父容器宽高是否固定
当容器宽高由内容撑开（如 height: auto），或受 flex/grid 影响而动态变化时，cover 每次缩放基准不同，导致裁剪区域跳变。尤其在移动端横竖屏切换时明显。
- 确保容器有明确的
width和height（哪怕用aspect-ratio） - 避免用
min-height或max-width单独约束，容易破坏比例一致性 - 调试技巧：临时加
outline: 1px solid red查看容器真实尺寸边界
background-position 的配合里，而不是单纯调 cover 或 contain。 
