本文详解如何使用纯 css（无需 javascript）实现顶部文字栏 + 底部自适应图像的全屏布局，确保图像在任意屏幕尺寸下垂直填满、不溢出、不拉伸失真，并始终维持原始宽高比。
在构建全屏 Web 应用（如数字标牌、Kiosk 展示页或沉浸式画廊）时，常需将页面划分为固定比例的区域：例如顶部 8% 显示标题/标语，底部 92% 全幅展示图像。关键挑战在于——图像必须严格约束在容器内，既不能裁剪（cover），也不能留白（contain 但未居中），同时必须保持原始比例，且适配所有设备尺寸。
你最初的尝试已接近正确：使用 position: absolute 划分区域，并为 <img> 设置 object-fit: cover; width: 100%; height: 100%。但问题正出在这里：width: 100%; height: 100% 会强制拉伸图像以填满整个容器，彻底破坏比例；而单纯 object-fit: contain 若未配合合理的尺寸控制与容器对齐策略，图像可能过小、偏移，甚至因父容器未启用弹性布局而无法居中。
✅ 正确解法的核心在于 三层协同控制：
- 父容器（bottomdiv）启用 Flex 布局：添加 display: flex; justify-content: center; align-items: center，确保子元素（图像）无论缩放大小，始终水平垂直居中；
-
图像自身采用“约束优先”策略：放弃 width/height: 100%，改用：
- max-width: 100% → 限制横向最大宽度不超容器；
- max-height: 100% → 限制纵向最大高度不超容器；
- min-height: 100% → 关键！ 确保图像至少撑满容器高度（优先满足垂直填满需求）；
- object-fit: contain → 在约束范围内按比例缩放，完整显示图像，不裁剪；
- 移除绝对定位对图像尺寸的干扰：避免在 <img> 上设置固定宽高，交由浏览器根据约束自动计算最优尺寸。
以下是优化后的完整代码（已精简冗余样式，增强可维护性）：
立即学习“前端免费学习笔记（深入）”；
<!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;
align-items: center;
justify-content: 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%;
object-fit: contain;
/* 可选：防止图像模糊（尤其高清屏） */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topdiv">
<h1>An awesome quote will go here!</h1>
</div>
<div id="bottomdiv">
<img src="1.jpg" alt="Full-screen visual">
</div>
</div>
</body>
</html>? 关键注意事项：
- min-height: 100% 是实现“垂直优先填满”的核心——它确保图像高度至少等于容器高度，再结合 max-height: 100% 和 object-fit: contain，浏览器会自动选择“刚好填满高度且不溢出”的缩放比例；
- 若图像本身宽高比远大于容器（如极窄长图），max-width: 100% 将起主导作用，此时图像会以宽度为基准缩放，高度自然小于容器，但 align-items: center 保证其垂直居中，视觉上依然和谐；
- 避免使用 <center> 标签（已废弃），改用 Flex 布局居中更语义化、兼容性更好；
- 对于高 DPI 屏幕（如 Retina），可添加 image-rendering 属性提升清晰度。
此方案完全基于现代 CSS，无 JS 依赖，兼容 Chrome/Firefox/Safari/Edge（≥IE11 需额外测试 object-fit 支持），是构建可靠全屏媒体展示页的推荐实践。
