cover填满容器但可能裁剪，contain保证全图可见但留白；选cover用于Banner等重视觉场景，contain用于证件照等需完整展示场景；需配合background-position并确保容器有宽高。
background-size: cover 和 contain 的区别到底怎么选？
选错就容易出现图片被裁剪或留白，关键看你要保内容还是保完整。用 cover 时图片会缩放并填满整个容器，可能裁掉边缘；用 contain 则保证整张图可见，但容器内可能有空白。
- 响应式卡片封面、Banner 图——优先试
background-size: cover - 证件照预览、图标展示等需完整呈现的场景——用
background-size: contain - 两者都依赖
background-position配合，比如center center才能居中裁切或居中显示
为什么设置了 background-size 却没生效？
常见原因是背景图没加载成功，或者容器本身没尺寸。CSS 背景图不会撑开无高度的 div，height: auto 在块级元素里对背景无效。
- 确认容器有明确宽高：比如
height: 200px或aspect-ratio: 16/9 - 检查图片路径是否正确，浏览器开发者工具 Network 标签页看
404错误 - 避免同时设了
background-attachment: fixed——它在某些移动端会禁用cover缩放
想让背景图随容器宽高动态拉伸（非比例缩放）怎么办？
用 background-size: 100% 100%，这是唯一真正“拉伸变形”的方式，适合海报、装饰性底图，但人像或 UI 元素慎用。
-
100% 100%表示水平和垂直方向各自拉满，不保持原图宽高比 - 配合
background-repeat: no-repeat，否则重复平铺会掩盖拉伸效果 - 注意：在视口缩放或 flex 容器里，它的行为比
cover更难预测，建议只用于固定尺寸容器
现代方案：用 object-fit 搭配 img 替代 background-image？
如果语义上这图本就是内容（比如产品主图），直接用 <img> + object-fit 更可控、可访问、支持懒加载。
立即学习“前端免费学习笔记（深入）”；
<img src="..." style="width: 100%; height: 200px; object-fit: cover;">- 相比 background-image，它天然响应父容器尺寸变化，且能通过
alt提供文字描述 - 兼容性没问题：Chrome 31+、Firefox 36+、Safari 10+、Edge 16+
真正麻烦的是既要背景语义又要精确控制缩放逻辑——这时候得回到 background-size，但务必验证不同屏幕宽度下的裁切位置是否合理，尤其移动端常因 viewport 缩放导致 cover 实际裁掉关键区域。
