本文详解如何在 position: fixed 的 header 内，通过合理设置 css 尺寸与约束属性（如 max-width/max-height），使子级 div 容器及其内部 img 元素自适应、不溢出且保持比例。
在使用 position: fixed 固定页眉时，一个常见痛点是：子容器（如 .main-header-logo）无法继承父容器高度，导致内部图片无法按预期缩放。根本原因在于：fixed 元素脱离文档流，其子元素若未显式定义尺寸或缺乏尺寸传递机制（如 height: 100% 在无明确父高时无效），就会出现“高度塌陷”——.main-header-logo 实际高度为 0，img { height: 100% } 自然失效。
✅ 正确解法不是强行设 height: 100%，而是利用 max-width 和 max-height 的约束性缩放能力，配合容器显式尺寸控制：
.main-header-logo {
width: 100px; /* 明确设定容器宽度 */
height: 40px; /* 建议显式设高度（如 header 行高），确保有基准 */
}
.main-header-logo-image {
height: 100%; /* 占满容器高度 */
max-width: 100%; /* 确保不横向溢出 */
max-height: 100%; /* 确保不纵向溢出 */
object-fit: contain; /* 可选：保持宽高比，居中显示完整图像 */
}⚠️ 关键注意事项：
- height: 100% 仅在父元素有明确高度值（非 auto）时才生效。.align_fixed_header_center 虽设 top/left/right，但未设 height 或 min-height，因此 .main-header-logo 的 height: 100% 无效；
- max-width/max-height 是响应式缩放的核心：它们允许图片在不超过容器边界的前提下，按原始比例自动缩放；
- 若需严格等比缩放且居中（避免拉伸或裁剪），推荐添加 object-fit: contain（兼容性良好，IE 不支持可降级为 width: 100%; height: auto）；
- 避免对 img 同时设置 width 和 height（强制拉伸失真），优先用 max-* + object-fit 组合。
? 进阶建议：为 header 设置统一高度（如 height: 60px），再让 logo 区域占其一部分（如 flex: 0 0 120px），可进一步提升布局稳定性与可维护性。
综上，解决固定定位 header 中图片适配问题的关键，在于*放弃对 100% 高度的盲目依赖，转而用 `max-` 提供安全缩放边界，并确保容器自身具备可测量的尺寸基础**。
