本文详解如何在固定高度的全屏布局中，让图片在不溢出、不拉伸失真的前提下，自动按比例缩放填充区域，核心在于合理组合 `object-fit`、`max-width`/`max-height` 与 flex 布局。
在构建全屏 Web 应用（如数字标牌、Kiosk 模式或沉浸式展示页）时，常需将视口严格划分为上下两个区域：顶部显示文字标题（如 8% 高度），底部承载主视觉图片（剩余 92%）。关键挑战在于——图片必须完全适配底部容器：既不能超出屏幕边界（禁止滚动），也不能因强制设置 width: 100%; height: 100% 而扭曲比例或裁剪内容。
你最初的尝试使用 object-fit: cover 配合 width: 100%; height: 100% 是常见误区：cover 会等比缩放并裁剪多余部分以填满容器，而 100% 尺寸会强制拉伸原始尺寸，导致溢出。正确解法是放弃对 <img> 设置绝对宽高，转而用约束性尺寸 + 内容对齐：
✅ 核心策略三要素：
- 在图片容器上启用 display: flex; justify-content: center; align-items: center，确保无论图片缩放后多大，始终居中；
- 对 <img> 仅设置 max-width: 100%; max-height: 100%; min-height: 100% —— 这保证图片优先按高度撑满容器（min-height: 100%），同时限制其宽度和高度均不超过容器边界，自然维持原始比例；
- object-fit: contain 是点睛之笔：它让图片在约束范围内完整可见、等比缩放、居中显示，绝不裁剪。
以下是优化后的完整代码（已移除过时的 <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; }
#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;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="topdiv">
<h1>An awesome quote will go here!</h1>
</div>
<div class="bottomdiv">
<img src="1.jpg" alt="Main visual">
</div>
</div>
</body>
</html>? 注意事项：
- min-height: 100% 是关键：它确保图片高度至少等于容器高度，避免过小图片留白；配合 max-height: 100%，实际渲染高度会在 [容器高度, 原图高度] 间自适应缩放；
- 若需图片覆盖整个区域且允许裁剪（如背景图效果），可将 object-fit: contain 改为 cover，但务必移除 min-height: 100%，否则可能强制拉伸；
- 建议为 <img> 添加 alt 属性提升可访问性；
- 现代项目中，推荐用 CSS 类替代内联样式，便于维护与响应式扩展。
此方案兼容所有现代浏览器（Chrome 32+、Firefox 36+、Safari 10+、Edge 16+），真正实现“一图适配千屏”，让视觉内容精准、优雅、无失真地占据指定空间。
