本文详解如何使用纯
css
（无需
java
script）实现顶部文字栏 + 底部自适应图像的全屏布局，确保图像在任意屏幕尺寸下垂直填满、不溢出、不拉伸失真，并始终维持原始宽高比。
在构建全屏 Web 应用（如数字标牌、Kiosk 展示页或沉浸式画廊）时，常需将页面划分为固定比例的区域：例如顶部 8% 显示标题/标语，底部 92% 全幅展示图像。关键挑战在于——
图像必须严格约束在容器内，既不能裁剪（cover），也不能留白（contain 但未居中），同时必须保持原始比例，且适配所有设备尺寸
。
你最初的尝试已接近正确：使用 position: absolute 划分区域，并为 设置 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 → 在约束范围内按比例缩放，完整显示图像，不裁剪；
移除绝对定位对图像尺寸的干扰
：避免在 上设置固定宽高，交由
浏览器
根据约束自动计算最优尺寸。
以下是优化后的完整代码（已精简冗余样式，增强可维护性）：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
?
关键注意事项
：
min-height: 100% 是实现“垂直优先填满”的核心——它确保图像高度至少等于容器高度，再结合 max-height: 100% 和 object-fit: contain，浏览器会自动选择“刚好填满高度且不溢出”的缩放比例；
若图像本身宽高比远大于容器（如极窄长图），max-width: 100% 将起主导作用，此时图像会以宽度为基准缩放，高度自然小于容器，但 align-items: center 保证其垂直居中，视觉上依然和谐；
避免使用 标签（已废弃），改用 Flex 布局居中更语义化、兼容性更好；
对于高 DPI 屏幕（如 Retina），可添加 image-rendering 属性提升清晰度。
此方案完全基于现代 CSS，无 JS 依赖，兼容 Chrome/Firefox/Safari/Edge（≥IE11 需额外测试 object-fit 支持），是构建可靠全屏媒体展示页的推荐实践。
Super Site
An awesome quote will go here!