本文详解如何在固定高度的全屏布局中，让图片在不溢出、不拉伸失真的前提下，自动按比例缩放填充区域，核心在于合理组合 `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 是点睛之笔：它让图片在约束范围内完整可见、等比缩放、居中显示，绝不裁剪。

以下是优化后的完整代码（已移除过时的

    
    
    



    
        
            
An awesome quote will go here!
        
        
            @@##@@