本文详解如何在固定高度的全屏布局中，让图片在不溢出、不拉伸失真的前提下，自动按比例缩放填充区域，核心在于合理组合 `object-fit`、`max-width`/`max-height` 与 flex 布局。
在构建全屏 Web 应用（如数字标牌、Kiosk 模式或沉浸式展示页）时，常需将视口严格划分为上下两个区域：顶部显示文字标题（如 8% 高度），底部承载主视觉图片（剩余 92%）。关键挑战在于——图片必须完全适配底部容器：既不能超出屏幕边界（禁止滚动），也不能因强制设置 width: 100%; height: 100% 而扭曲比例或裁剪内容。
你最初的尝试使用 object-fit: cover 配合 width: 100%; height: 100% 是常见误区：cover 会等比缩放并裁剪多余部分以填满容器，而 100% 尺寸会强制拉伸原始尺寸，导致溢出。正确解法是放弃对 设置绝对宽高，转而用约束性尺寸 + 内容对齐：
✅ 核心策略三要素：
- 在图片容器上启用 display: flex; justify-content: center; align-items: center，确保无论图片缩放后多大，始终居中；
- 对
仅设置 max-width: 100%; max-height: 100%; min-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 改为 cover，但务必移除 min-height: 100%，否则可能强制拉伸；
- 建议为
添加 alt 属性提升可访问性； - 现代项目中，推荐用 CSS 类替代内联样式，便于维护与响应式扩展。
此方案兼容所有现代浏览器（Chrome 32+、Firefox 36+、Safari 10+、Edge 16+），真正实现“一图适配千屏”，让视觉内容精准、优雅、无失真地占据指定空间。
