cover使背景图等比缩放并完全覆盖容器，可能裁剪；contain保证全图可见但会留白；100% 100%强制拉伸失真。选cover填满、contain保全图，需确保容器有高度且路径正确。
background-size: cover 和 contain 的区别在哪
直接用 background-size: cover 是最常见解法，但它不是“自适应宽度”本身，而是让背景图等比缩放并完全覆盖容器——可能裁剪上下或左右。而 background-size: contain 保证全图可见，但会留白。选哪个取决于你更在意“填满”还是“看清全图”。
容易踩的坑是以为设了 background-size: 100% 100% 就能自适应：它强制拉伸，失真严重，且不保持宽高比。
-
cover：适合 banner、封面图，容器尺寸多变时优先用 -
contain：适合 logo、图标类背景，不能丢失任何细节 -
100% 100%：慎用，仅当明确接受变形时才考虑
为什么 background-image 配合 background-size 还是不生效
最常见的原因是容器没高度。CSS 背景图不会撑开父元素，如果 div 里没内容、也没设 height 或 min-height，它实际高度为 0，图自然看不见。
另一个高频问题是背景图路径错误或跨域限制（尤其本地双击打开 HTML 文件时，file:// 协议下部分浏览器会拦截图片加载）。
立即学习“前端免费学习笔记（深入）”；
- 给容器加
min-height: 200px或height: 100vh确保有渲染空间 - 检查控制台是否有
Failed to load resource错误，确认图片路径正确（推荐用相对路径如./images/bg.jpg） - 避免在
file://下调试，起个本地服务（如 Python 的python3 -m http.server）
如何让背景图随容器宽度变化实时重缩放
纯 CSS 就够了，不需要 JS。关键是把 background-size 和 background-position 配合好，并确保容器本身响应式。
比如用 background-size: cover + background-position: center，再配合媒体查询微调断点处的 min-height，就能实现宽度变化时背景图自动重算缩放比例。
- 必须设置
background-repeat: no-repeat，否则小图会平铺干扰效果 - 移动端要注意
background-attachment: fixed在 iOS 上兼容性差，慎用 - 如果容器用
flex或grid布局，确保其父级也有明确尺寸约束，不然缩放行为不可控
background-image 自适应在不同设备上的表现差异
桌面端通常没问题，但 iOS Safari 对 background-size: cover 在 position: fixed 容器里有渲染延迟；安卓部分 WebView 会忽略 background-position: center 导致偏移。
性能上，大图直接设为背景会导致首屏加载慢，尤其 2MB+ 的 JPG/PNG。不是所有“自适应”都该靠 CSS 实现。
- 用
srcset+picture标签替代背景图，更适合关键视觉内容（如首页大图） - 对纯装饰性背景，可压缩图片到 200KB 以内，并启用
image-rendering: -webkit-optimize-contrast提升缩放清晰度 - 测试务必真机连 Chrome DevTools 远程调试，模拟器常掩盖渲染问题
真正麻烦的不是写哪行 CSS，而是得同时盯住容器尺寸来源、图片加载时机、设备渲染管线这三件事——漏一个，自适应就变成“有时行，有时不行”。
