background-size: cover 并非唯一可靠方案，必须配套 background-repeat: no-repeat、background-position: center center 及容器足够高度（如 min-height: 100vh）才能生效；缺一即导致留白、平铺或裁剪偏移。

用 background-size: cover 是唯一可靠方案，前提是配套属性写全、容器高度有保障——漏掉任意一环都会导致留白或变形。

为什么 background-size: cover 必须配 no-repeat 和 center

cover 只管缩放逻辑，不控制平铺和定位。浏览器默认 background-repeat: repeat，小图会平铺；默认 background-position: 0 0（左上角），裁剪时关键内容直接被切掉。

• background-repeat: no-repeat：防止图片重复平铺，尤其当图尺寸小于容器时
• background-position: center center：确保等比缩放后画面中心始终对准容器中心
• 三者缺一不可，简写写法应为：background: url(...) no-repeat center center / cover，顺序不能错

容器没高度，cover 就是摆设

如果目标元素（比如 div 或 body）没有明确高度，background-size: cover 无处可盖——它只能按容器当前尺寸缩放，而默认 height: auto 时容器高度由内容撑开，往往远小于视口。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给容器设 height: 100vh 或 min-height: 100vh（推荐后者，防内容少时铺不满）
• 若设在 body 上，必须同步清空 html 和 body 的默认 margin，并让 html 有高度链：html { height: 100%; }
• 绝对定位的容器要加 top: 0; left: 0; width: 100%; height: 100%;，否则 100% 无参考基准

background-size: 100% 100% 为什么总出问题

它强制拉伸图片填满宽高，完全无视原始比例。一张 4:3 的人像图在 16:9 容器里会被压扁，文字扭曲、人脸变形，且这种失真浏览器不会报错，只安静渲染。

• 仅适用于抽象纹理、渐变色块等无构图要求的素材
• 响应式断点切换时极易失控，比如桌面图在手机上横向拉长成细条
• 与 background-attachment: fixed 搭配滚动时，拉伸感更明显，iOS Safari 还可能触发模糊渲染

真正容易被忽略的是高度链和默认边距——90% 的“铺不满”问题都卡在这两步，而不是背景属性本身写错了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！