本文详解如何在固定比例的上下分栏布局中，让底部图片在不溢出、不拉伸失真的前提下，完全适配容器高度与宽度，同时严格维持原始宽高比。
在全屏无滚动（overflow: hidden）的 Web 应用中，实现图片在动态尺寸容器内“安全填充”是一项常见但易出错的布局需求。你当前的结构已具备良好基础：使用 100vh 高度的 wrapper、绝对定位划分顶部（8%）与底部（92%）区域。问题核心在于——直接设置 width: 100%; height: 100% 会强制拉伸图片，破坏比例；而仅用 object-fit: cover 在未约束父容器为 flex 布局时，无法保证图片既填满可用空间又不越界。
✅ 正确解法的关键在于 “约束 + 居中 + 比例保护”三重策略：
- 父容器启用 Flex 布局：将 bottomdiv 设置为 display: flex; justify-content: center; align-items: center，使其成为可控的弹性容器，为子元素居中与尺寸约束提供上下文；
-
图片尺寸采用极值控制而非固定赋值：
- max-width: 100%：确保图片宽度绝不超出父容器；
- max-height: 100%：确保图片高度绝不超出父容器；
- min-height: 100%：关键！ 强制图片至少撑满容器高度（优先满足垂直填充），再由 object-fit: contain 自动按比例缩放宽度；
- 保留 object-fit: contain：这是保持比例的核心——它会在不裁剪的前提下，将整张图片完整显示于容器内，自动缩放至最大可容纳尺寸。
以下是优化后的完整代码（已移除过时
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Site</title>
</head>
<body style="margin: 0; padding: 0; border: 0; overflow: hidden; font-family: sans-serif;">
<div id="wrapper" style="position: relative; height: 100vh; background-color: #ffeb3b;">
<!-- Top div: 8% height -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 8%; background-color: #f44336; display: flex; align-items: center; justify-content: center;">
<h1 style="margin: 0; color: white; font-size: 1.5rem;">An awesome quote will go here!</h1>
</div>
<!-- Bottom div: 92% height, flex-centered image -->
<div style="position: absolute; top: 8%; left: 0; right: 0; bottom: 0; background-color: #9c27b0; display: flex; justify-content: center; align-items: center;">
<img
src="1.jpg"
alt="Full-screen background image"
style="max-width: 100%; max-height: 100%; min-height: 100%; object-fit: contain;"
>
</div>
</div>
</body>
</html>? 注意事项与进阶提示：
立即学习“前端免费学习笔记（深入）”；
- ✅ min-height: 100% 是本方案的点睛之笔：它确保图片在高度方向“优先填满”，再由 contain 自动调节宽度，避免出现顶部/底部留白；
- ⚠️ 避免混用 height: 100% 和 object-fit：若同时设置 height: 100%，会覆盖 min-height 的行为，导致比例失效；
- ? 若需“背景图式覆盖效果”（即允许裁剪以完全铺满），请改用 object-fit: cover + min-width: 100% + min-height: 100%，但此时需确认业务允许内容被裁切；
- ? 建议添加 标签，保障移动端全屏渲染一致性；
- ? 如需响应式增强（如横竖屏切换），可配合 @media (orientation: landscape/portrait) 微调比例阈值。
该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥16），无需 JavaScript，纯 CSS 驱动，稳定高效，是全屏媒体展示场景下的推荐实践。
