本文详解如何通过 CSS Flexbox 正确设置容器与图片的尺寸关系，确保 #image div 高度严格匹配图片内容，消除常见因默认行内元素行为、边距或盒模型导致的高度不一致问题。
本文详解如何通过 css flexbox 正确设置容器与图片的尺寸关系，确保 `#image` div 高度严格匹配图片内容，消除常见因默认行内元素行为、边距或盒模型导致的高度不一致问题。
在实际开发中，许多初学者会遇到这样的问题：明明给 设置了 height: 100% 或 100vh，但其父级
却未能等高撑开，导致视觉上“图片溢出”或“下方留白”。根本原因在于：![]()
是替换元素（replaced element），其默认 display 值为 inline，会受行内布局影响产生基线对齐（baseline alignment）带来的底部间隙；同时，父容器若未明确高度来源或未启用弹性布局，height: 100% 将失效（因百分比高度需依赖有明确高度的祖先）。
✅ 正确解法：采用 Flexbox 布局重构结构
将 #container 设为 display: flex，并让 #image 和 #form 成为同级弹性子项，可彻底规避传统定位（如 position: absolute）带来的尺寸失控问题：
body {
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
height: 100vh; /* 确保 body 有明确高度 */
display: flex;
}
#container {
display: flex;
width: 100%;
height: 100%;
}
#image {
flex: 0 0 35%; /* 不伸缩、不收缩，固定占宽35% */
height: 100%;
overflow: hidden;
}
#image img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持宽高比并填满 */
display: block; /* 关键！消除 inline 默认基线间隙 */
}
#form {
flex: 1; /* 剩余宽度自适应 */
padding: 20px;
box-sizing: border-box;
}
? 关键修复点说明：
- img { display: block }：强制图片脱离行内流，消除底部约 4px 的默认空白；
- #image 使用 flex: 0 0 35% 而非 width: 35% + height: 100vh，使其在 flex 容器中获得可靠尺寸控制；
- #container 必须设 height: 100% 且其父（body）需有明确高度（推荐 height: 100vh），否则 100% 高度无依据；
- 移除 #form 的 position: absolute —— 绝对定位会脱离文档流，导致 #container 无法感知其高度，进而影响整体布局稳定性。
⚠️ 注意事项与最佳实践
- 避免混合定位模型：原代码中 #form 使用 position: absolute，而 #image 使用 inline-block，二者无法协同撑满容器高度。统一使用 Flexbox 或 Grid 才能实现响应式、可预测的尺寸控制。
- 图片加载前的占位处理：若网络较慢，可为 #image 添加 min-height: 100vh 或背景色，防止布局抖动。
-
响应式增强建议：在小屏设备上，可添加媒体查询将布局改为垂直堆叠：
@media (max-width: 768px) { #container { flex-direction: column; } #image { flex-basis: auto; height: 40vh; } }
通过以上调整，#image div 将严格匹配图片渲染后的实际尺寸，不再出现“略矮于容器”的错觉。这不仅是样式修复，更是现代 CSS 布局思维的体现：用容器逻辑（Flex/Grid）替代元素定位逻辑，让尺寸关系更清晰、更可控。
