本文详解如何使用纯 css（无需 javascript）实现顶部文字栏 + 底部自适应图像的全屏布局，确保图像在任意屏幕尺寸下垂直填满、不溢出、不拉伸失真，并始终维持原始宽高比。
在构建全屏 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 → 在约束范围内按比例缩放，完整显示图像，不裁剪；
-
移除绝对定位对图像尺寸的干扰：避免在
上设置固定宽高，交由浏览器根据约束自动计算最优尺寸。
以下是优化后的完整代码（已精简冗余样式，增强可维护性）：
立即学习“前端免费学习笔记（深入）”；
Super Site
An awesome quote will go here!
@@##@@
? 关键注意事项：
- 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 支持），是构建可靠全屏媒体展示页的推荐实践。
