background-size: cover 会裁切图片是因为其逻辑是等比缩放填满容器并裁剪溢出部分，不保证主体可见；需配合 background-position、aspect-ratio 和容器尺寸约束来精准控制构图。
background-size: cover 为什么有时图片还是被裁切？
因为 cover 的逻辑是「等比缩放，填满容器，超出部分裁剪」——它不保证主体内容可见。常见于 banner 区域人物脸部被切掉、logo 偏离中心等情况。
真正可控的方式是组合使用：background-size: cover + background-position + 容器尺寸约束。
- 优先给背景容器设明确的
width和height（或用aspect-ratio），避免高度塌陷导致比例失控 -
background-position推荐用具体值（如center top、50% 20%）而非默认center center，便于微调视觉重心 - 移动端慎用固定像素
height，改用min-height: 60vh或aspect-ratio: 16/9更安全
用 aspect-ratio + background-size 实现无 JS 比例锁定
CSS aspect-ratio 是目前最干净的响应式背景比例控制手段，兼容 Chrome 88+、Firefox 89+、Safari 15.4+。它让容器自身维持宽高比，再配合 cover，就能稳定呈现构图。
header.hero {
aspect-ratio: 16 / 9;
background-image: url('hero.jpg');
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
}
/ 小屏下可覆盖为更竖向的比例 /
@media (max-width: 768px) {
header.hero {
aspect-ratio: 4 / 5;
}
}
注意：若需兼容旧浏览器（如 IE 或老安卓 WebView），得回退到 padding-top 技巧，但会增加 DOM 层级和维护成本。
立即学习“前端免费学习笔记（深入）”；
background-size: 100% 100% 的陷阱
这个写法强制拉伸填充，完全破坏原图比例，通常不是“自适应”，而是“失真适配”。仅适用于纯纹理、抽象渐变或可接受形变的场景（比如噪点底图）。
- 人物、产品图、文字型 Banner 绝对不要用
- 如果设计师给了「必须铺满不留白」的需求，先确认是否允许局部模糊或插值失真——
image-rendering: -webkit-optimize-contrast可略微缓解锯齿，但无法救比例 - 替代方案：用
object-fit: cover配合
多设备下背景图加载与性能权衡
自适应不只是 CSS 问题。不同设备应加载不同分辨率图，否则小屏加载 4K 图会浪费带宽。
- 用
picture+source[srcset]控制图像资源，CSS 背景图本身不支持响应式 srcset - 若坚持用 CSS 背景，可通过媒体查询切换
background-imageURL：@media (min-resolution: 2dppx)加载 @2x 版本 - 关键背景图建议加
fetchpriority="high"（HTML 中）或预加载，避免 FOUC
比例控制只是表象，背后是容器约束、图像源管理、渲染时机三者的协同。漏掉任意一环，都会在某个机型上突然“错位”。
