background-size: cover 是唯一可靠实现背景图自适应裁剪的方法，需配合 background-position: center center、background-repeat: no-repeat 和 overflow: hidden，并通过 padding-bottom 构建固定宽高比容器以确保裁剪基准稳定。
background-size: cover 是核心，不是可选项
想让背景图自适应并自动裁剪，background-size: cover 是唯一可靠的选择。它强制图片等比缩放，使**最小边刚好填满容器**，另一方向自然溢出——这正是“裁剪”的本质。用 100% 或 auto 会拉伸变形；用 contain 则留白，不满足“裁剪”需求。
常见错误是只写 background-size: cover 却忽略锚点控制，导致关键内容（比如人脸、建筑中轴）被切掉。必须配合 background-position: center center，确保裁剪以中心为基准。
-
background-repeat: no-repeat必须显式声明，否则高分屏下可能意外平铺 - 若容器高度靠内容撑开（如
height: auto），cover 可能失效——裁剪依赖明确的宽高边界 - 移动端 Safari 对
background-attachment: fixed支持不稳定，视差效果慎用
固定宽高比容器要靠 padding-bottom 实现
当需要背景图始终维持 4:3、16:9 或 1:1 等比例（比如卡片、轮播项），不能只靠 width: 100% 和 height: auto——那对背景图无效。必须构造一个**有确定宽高比的容器**。
标准做法是：设 height: 0 + padding-bottom 百分比。例如 16:9 容器：padding-bottom: 56.25%（9 ÷ 16 × 100%）。此时 background-size: cover 才有稳定裁剪基准。
立即学习“前端免费学习笔记（深入）”；
- 百分比 padding 的计算始终基于父容器宽度，与 height 无关
- 务必加
overflow: hidden，否则裁剪溢出部分可能触发滚动条（尤其在 iOS Safari） - 不要给该容器设
min-height或max-height，会破坏比例逻辑
移动端焦点偏移需用媒体查询微调 background-position
桌面端居中裁剪的图，放到手机上可能把人物头顶或脚部切掉——因为屏幕窄、高，裁剪区域变了。这时不能重做一张图，而是用媒体查询动态调整锚点。
例如原图主体是人像，希望手机端多留头顶空间：@media (max-width: 768px) { .hero { background-position: center top; } }。也可用数值微调：background-position: center 20% 表示垂直方向向上偏移 20%。
- 避免用像素值（如
10px）做偏移，响应式失效 - 慎用
background-position: bottom，小屏下容易把主体全切掉 - 测试时重点看 iPhone SE（320px 宽）和折叠屏展开态，二者裁剪差异最大
Canvas 背景图裁剪要绕开 img 标签陷阱
直接给 <canvas> 设 background-image 看似简单，但实际开发中最常踩的坑是路径和协议问题。浏览器禁止 file:// 下加载 c:\ 这类本地绝对路径，报错 net::ERR_FILE_NOT_FOUND。
正确做法：图片放项目 assets 目录，用相对路径；开发时启用本地服务器（如 VS Code Live Server），确保走 http:// 协议。CSS 中写 background-image: url("./assets/bg.jpg")，再配 background-size: cover 和 background-position: center 即可。
- Canvas 上后续用 JS 绘图时，注意
clearRect()不会清除 CSS 背景，无需额外处理 - 若 canvas 尺寸靠 JS 动态设置（如
canvas.width = window.innerWidth），CSS 背景仍生效，无需重绘 - 避免在 canvas 标签内嵌
<img>再 drawImage —— 那是 JS 渲染路径，和 CSS 背景裁剪无关且性能更差
