cover使短边填满容器、长边裁剪，contain使长边贴合容器、短边留白；二者均保持宽高比但缩放逻辑相反，且均依赖容器有明确高度才能生效。
background-size: cover 和 contain 的实际表现差异
cover 和 contain 都保持图片原始宽高比，但缩放逻辑相反：cover让短边填满容器、长边裁剪；contain让长边贴合容器、短边留白。比如一个 4:3 的图放在 16:9 的 banner 容器里，cover会裁掉上下，contain则左右留黑边。
常见误判是以为 cover 就“一定填满”，其实它只保证覆盖，不保证无裁剪；contain 也不是“总能看清全图”，如果容器太窄，图片会被等比压缩到极小。
- 人像/重点内容居中 → 优先
cover+background-position: top center（保脸）或center center（构图居中） - Logo/图标/带文字的图 → 必须
contain+background-position: center - 绝对避免
background-size: 100% 100%：强制拉伸失真，尤其在人像或文字图上一眼可辨
为什么 background-image 设了 cover 还是看不见或没铺满
最常被忽略的原因是容器没有高度。CSS 背景图不会撑开父元素，div 里没内容、也没设 height 或 min-height，它的渲染高度就是 0 —— 图自然不显示。
- 给容器加
min-height: 100vh（不是height: 100%，后者依赖父级高度） - 确保
background-repeat: no-repeat，否则小图会平铺，cover失效 - 检查控制台是否有
Failed to load resource，确认路径是相对于 CSS 文件（如./images/bg.jpg），不是 HTML - 本地双击打开 HTML 时用
file://协议，部分浏览器会拦截图片加载；起个本地服务更可靠，比如python3 -m http.server
img 标签和 background-image 混用导致样式失效
把图片塞进 <img> 标签，再试图用 background-size 控制——这根本不会生效。background-size 只对设置了 background-image 的元素起作用，对 <img> 是无效属性。
想让 <img> 填满容器且等比缩放，该用的是 width/height + object-fit：
- 容器需有明确尺寸（如
width: 400px; height: 300px;）且overflow: hidden -
img设width: 100%; height: 100%; object-fit: cover;→ 效果类似背景图的cover -
object-fit: contain;→ 全图可见，可能留白；object-fit: fill;→ 强制拉满、必变形
移动端和固定定位下的兼容性陷阱
background-attachment: fixed 在 iOS Safari 上渲染延迟甚至失效，尤其配合 cover 时容易错位；安卓部分 WebView 会忽略 background-position: center 导致偏移。
性能上，大图直接作背景会导致首屏加载慢。2MB+ 的 JPG/PNG 不建议直接设为 background-image，关键视觉内容（如首页大图）应改用 <picture></picture> + srcset。
真正容易被忽略的是：background 缩放行为受父级布局约束。如果容器用 flex 或 grid，而其父级没设尺寸（比如 height: auto），cover 的计算就不可控——最终效果取决于整个布局链的尺寸传递是否完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
