本文介绍如何使用纯 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-* 的自然等比缩放逻辑。
以下是优化后的完整代码（已移除过时的
极品模板多语言企业网站管理系统1.2.2
下载
【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键
<!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">
@@##@@
</div>
</div>
</body>
</html>? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- min-height: 100% 是关键：它确保图片高度至少等于容器高度，触发垂直方向的“撑满”行为；
- height: auto 必须显式声明，否则部分浏览器可能忽略比例继承；
- 避免在 .bottomdiv 上设置 height: 92%（冗余且易引发计算误差），直接用 top: 8%; bottom: 0 更可靠；
- 若需适配极窄/极宽屏幕（如手机横屏 vs. 超宽显示器），可进一步添加 @media 规则微调顶部区域高度或字体大小。
该方案已在 Chrome、Firefox、Safari 和 Edge（Chromium）中验证通过，完全符合全屏应用“零滚动、零溢出、保比例”的核心需求。
