本文介绍一种纯 css 方案，通过 flexbox 与 `object-fit` 配合，使左右固定宽高比容器自动跟随中间图片的高度变化而等比例缩放，无需 javascript 即可实现响应式头部布局。
在构建响应式头部布局时，常见需求是：左侧菜单按钮（如 64×128）、右侧头像（如 128×128）与中间自适应 logo 区域共存，并在视口变窄时整体等比例垂直收缩——即中间图片按比例缩小后，左右容器也同步降低高度（保持宽高比），从而维持视觉一致性。传统绝对定位（position: absolute）方案无法实现这种“高度联动”，而 Flexbox 提供了天然的解决方案。
核心思路是：
✅ 将 .header 设为 display: flex，并启用 align-items: stretch（默认行为，确保子项高度拉伸至容器最大高度）；
✅ 移除所有 height 和 position: absolute 的硬编码值，改用弹性尺寸与 object-fit 控制图像渲染；
✅ 左右容器使用 min-width 固定基础宽度，但高度由 Flex 容器统一分配；
✅ 中间 .logo 设置 flex: 1 或 min-width: 60%，使其占据剩余空间，同时内部图片设为 width: 100%; height: 100%; object-fit: cover，保证缩放时始终填满且保持比例。
以下是关键 CSS 实现：
.header {
display: flex;
align-items: stretch; /* 确保子项高度一致 */
width: 100%;
max-width: 640px;
}
.menubtn, .avatar {
/* 移除 height / position，交由 flex 控制 */
min-width: 64px; /* 左侧最小宽度 */
padding: 4px; /* 可选：预留内边距 */
}
.avatar {
min-width: 128px; /* 右侧最小宽度 */
}
.logo {
flex: 1; /* 自动填充中间剩余空间 */
min-width: 60%; /* 防止过窄时塌陷 */
}
/* 所有图片均使用 object-fit 统一控制缩放行为 */
.menubtn img,
.logo img,
.avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，依设计需求选择 */
}⚠️ 注意事项：
- 避免 height 硬编码：原代码中 .menubtn { height: 128px } 会强制锁定高度，破坏弹性；应完全依赖 Flex 容器的高度分配机制。
- 慎用 max-height：.header { max-height: 128px } 可保留，但需配合 height: auto 或 min-height，否则可能截断内容。
-
图片源需支持响应式加载：建议使用 srcset 或现代
元素适配不同 DPR，避免模糊。 - 兼容性提示：object-fit 在 IE 中不支持，如需兼容旧浏览器，可结合 background-image + background-size: cover 替代。
最终效果是：当视口宽度减小，中间图片因 width: 100% 缩小 → Flex 容器总高度随之降低 → 左右容器因 height: 100% 自动等比收缩 → 所有图像通过 object-fit 保持清晰、比例正确。整个过程零 JS，语义清晰，维护成本低。
立即学习“前端免费学习笔记（深入）”；
该模式不仅适用于头部导航，还可拓展至卡片网格、广告横幅、多列图文模块等需要“内容驱动高度”的场景，是现代 CSS 响应式布局的重要实践范式。
