本文详解如何在全屏布局中，让图片在指定高度的容器内自适应缩放、不溢出、不拉伸，并严格保持原始宽高比，适用于无滚动的沉浸式应用界面。
在构建全屏 Web 应用（如数字标牌、Kiosk 展示页或引导页）时，常需将页面垂直划分为多个区域：顶部标题栏 + 底部主视觉区。关键挑战在于——底部图片必须 100% 填满可用空间（92vh），同时不裁剪、不变形、不超出视口边界。原方案使用 object-fit: cover 配合 width: 100%; height: 100% 反而导致图片强制拉伸或溢出，根本原因在于：cover 会优先填满容器并裁剪多余部分，而 height: 100% 在绝对定位子元素中可能因父容器未显式定义 height 或计算逻辑冲突而失效。
✅ 正确解法的核心是 “约束优先，居中保障”：
-
对图片本身：放弃固定宽高，改用 max-width: 100% + max-height: 100% + min-height: 100% 组合，再配合 object-fit: contain。
- max-width/height 确保图片绝不超过容器边界；
- min-height: 100% 强制图片至少撑满容器高度（纵向优先适配）；
- object-fit: contain 保证图像完整可见且比例恒定，留白自动出现在左右/上下（取决于图片宽高比）。
-
对图片容器（bottomdiv）：添加 display: flex; justify-content: center; align-items: 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%;
object-fit: contain;
/* 可选：添加平滑缩放过渡 */
transition: transform 0.3s ease;
}
</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>? 关键注意事项：
- ✅ object-fit: contain 是本方案的灵魂——它与 max-* / min-* 配合才能真正实现“等比缩放+不溢出”；cover 适合背景图填充，但会牺牲完整性。
- ✅ 绝对定位容器（如 #bottomdiv）必须明确定义 top 和 bottom（或 height），否则 100% 高度计算可能失准。
- ⚠️ 避免使用已废弃的 <center> 标签，改用 Flexbox 居中更语义化、兼容性更好。
- ? 若图片极窄（如 1:10 竖图），min-height: 100% 可能使其宽度不足，此时可加 min-width: 100% 并调整 object-fit 为 scale-down，但需结合实际场景权衡。
此方案已在 Chrome/Firefox/Safari 最新版及 Edge 中验证通过，完美适配各种分辨率与图片比例，是全屏响应式图片布局的可靠实践。
