background-size: cover 能等比缩放防变形，但无法避免裁切关键内容或解决安卓软键盘导致的布局塌陷；需配合明确容器尺寸、合理 background-position、独立 fixed 容器及响应式断点控制。
直接说结论：background-size: cover 能防变形，但不能“自动适配所有场景”——它只保证等比缩放，不保证关键内容不被裁掉，也不解决安卓软键盘弹出时的布局塌陷问题。
为什么 background-size: cover 有时还是拉伸了？
常见错误是误以为设了 cover 就万事大吉。实际拉伸往往来自其他地方：
- 父容器没设明确宽高，比如
height: auto或由内容撑开，导致背景图在窄高容器里被迫压缩（cover仍会等比缩放，但容器本身比例极端，视觉上像“被压扁”） - 写了
background-size: 100% 100%却没删干净，CSS 优先级覆盖了cover - 用了
background-attachment: fixed但没配background-position，Safari 或部分安卓 WebView 在滚动/缩放时重绘异常，出现局部拉伸假象
移动端必须配 background-position，不能只靠默认 center
人像、Logo、文字区域不在图中央？cover 一裁就丢重点。尤其竖屏手机，顶部常被切掉。
-
background-position: top center—— 适合人像、标题居上的图，保头顶 -
background-position: bottom center—— 适合底部有按钮或 CTA 的 Banner - 用百分比更精准：
background-position: 50% 20%表示“图片横向中点对齐容器中点，纵向 20% 位置对齐容器顶部”，不是简单偏移 20px
安卓软键盘弹起时背景图“跳动”或“挤压”，cover 本身不扛这事
这是布局层问题，不是背景图缩放问题。安卓软键盘会压缩视口高度，触发页面重排，fixed 元素或 body 高度计算错位，导致背景图渲染区域突变。
- 别给
body设position: fixed—— 它会让整个页面脱离文档流，iOS 下可能白屏，安卓下反而更难控制滚动 - 推荐方案：把背景图挂到一个独立
div上，设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;，再配background-size: cover和明确background-position - 加个兜底：
@media (max-height: 600px)里临时切为background-size: contain，避免键盘顶上来后图被裁得只剩眼睛
响应式断点里别忘了重设 background-size
桌面端用 cover 很稳，手机横屏可能还行，一转竖屏人脸就没了。不能指望一个值打天下。
- 小屏（
max-width: 480px）：改用background-size: contain+background-position: top，确保关键内容全显 - 中屏（
481px–768px）：保留cover，但background-position改成top center - 注意：如果用了
aspect-ratio控制容器比例，cover效果会更可控，但 iOS 15.4 以下不支持
真正容易被忽略的点是：你调好了 cover，但没意识到软键盘、横竖屏切换、WebView 渲染策略这些外部因素会直接干扰它的生效条件。防变形不是设一个属性就结束，而是守住容器尺寸、定位逻辑、断点行为这三层边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
