本文介绍如何使用纯 css 构建全屏布局：顶部 8% 区域显示文字，底部 92% 区域自适应显示图片，确保图片在任意屏幕尺寸下垂直填满、水平居中、严格保持原始比例且绝不溢出容器。
要实现一个无滚动、全屏、比例可控的图片展示区域，关键在于分离“容器约束”与“内容缩放”逻辑。原代码中直接设置 width: 100%; height: 100% 强制拉伸图片，破坏了宽高比；而 object-fit: cover 虽能裁剪填充，但会隐式溢出（尤其当图片宽高比远小于容器时），无法满足“不超出屏幕”的硬性要求。
✅ 正确解法的核心是三重保障：
- 容器层：用 display: flex + justify-content: center + align-items: center 确保子元素居中定位；
- 图片层：放弃固定宽高，改用 max-width: 100%; max-height: 100%; min-height: 100% —— 这组组合强制图片优先按高度撑满容器（因 min-height: 100%），同时通过 max-width/max-height 双重限制，防止其在任一方向突破边界；
- 比例守恒：object-fit: contain 在此场景中并非必需（因宽高未被强制拉伸），但保留可增强兼容性；真正起作用的是浏览器对 max-* + min-* 的自然等比缩放逻辑。
以下是优化后的完整代码（已移除过时的 <center> 标签，语义更规范）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Super Site</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; height: 100vh; }
#wrapper {
position: relative;
height: 100vh;
background-color: yellow;
}
.topdiv {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.bottomdiv {
position: absolute;
top: 8%;
left: 0;
right: 0;
bottom: 0;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
}
.bottomdiv img {
max-width: 100%;
max-height: 100%;
min-height: 100%;
height: auto;
object-fit: contain;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="topdiv">
<h1>An awesome quote will go here!</h1>
</div>
<div class="bottomdiv">
<img src="1.jpg" alt="Full-screen background image">
</div>
</div>
</body>
</html>? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- min-height: 100% 是关键：它确保图片高度至少等于容器高度，触发垂直方向的“撑满”行为；
- height: auto 必须显式声明，否则部分浏览器可能忽略比例继承；
- 避免在 .bottomdiv 上设置 height: 92%（冗余且易引发计算误差），直接用 top: 8%; bottom: 0 更可靠；
- 若需适配极窄/极宽屏幕（如手机横屏 vs. 超宽显示器），可进一步添加 @media 规则微调顶部区域高度或字体大小。
该方案已在 Chrome、Firefox、Safari 和 Edge（Chromium）中验证通过，完全符合全屏应用“零滚动、零溢出、保比例”的核心需求。
