本文介绍如何使用纯 css 构建全屏布局：顶部 8% 区域显示文字，底部 92% 区域自适应显示图片，确保图片在任意屏幕尺寸下垂直填满、水平居中、严格保持原始比例且绝不溢出容器。

要实现一个无滚动、全屏、比例可控的图片展示区域，关键在于分离“容器约束”与“内容缩放”逻辑。原代码中直接设置 width: 100%; height: 100% 强制拉伸图片，破坏了宽高比；而 object-fit: cover 虽能裁剪填充，但会隐式溢出（尤其当图片宽高比远小于容器时），无法满足“不超出屏幕”的硬性要求。

✅ 正确解法的核心是三重保障：

• 容器层：用 display: flex + justify-content: center + align-items: center 确保子元素居中定位；
• 图片层：放弃固定宽高，改用 max-width: 100%; max-height: 100%; min-height: 100% —— 这组组合强制图片优先按高度撑满容器（因 min-height: 100%），同时通过 max-width/max-height 双重限制，防止其在任一方向突破边界；
• 比例守恒：object-fit: contain 在此场景中并非必需（因宽高未被强制拉伸），但保留可增强兼容性；真正起作用的是浏览器对 max-* + min-* 的自然等比缩放逻辑。

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

    
    
    



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