本文详解如何让图片在 fixed 定位的 header 内自适应缩放、不溢出且保持比例，核心是结合 `height: 100%` 与 `max-width/max-height: 100%` 实现安全拉伸。
当 header 使用 position: fixed 时，其子元素（如包裹 img 的 div）默认脱离文档流，且高度往往未被显式定义——这导致 height: 100% 在 img 上失效（因为父级 .main-header-logo 缺乏可继承的高度基准）。单纯设置 width: 100px 或 height: 100% 无法奏效，根本原因在于：百分比高度依赖于已知高度的父容器，而 fixed header 默认无固有高度，其子 div 也未设定明确高度约束。
✅ 正确解法是采用「约束性缩放」策略：
- 为 .main-header-logo 设置明确高度（推荐与 header 行高一致，如 height: 48px），确保子元素有高度参考；
- 对 .main-header-logo-image 同时应用：
.main-header-logo-image { height: 100%; /* 拉伸至父 div 高度 */ max-width: 100%; /* 防止宽度超父容器 */ max-height: 100%; /* 防止高度超父容器 */ object-fit: contain; /* 可选：保持宽高比，居中显示完整图像 */ }
? 补充建议：
- 若需 logo 始终等比缩放且居中，推荐用 object-fit: contain + width: auto; height: 100%；
- 避免仅设 width: 100%（易拉伸变形）或仅 height: 100%（忽略宽度限制）；
- 固定 header 应添加 z-index 防止被其他元素遮挡，例如 z-index: 1000；
- 为兼容性考虑，object-fit 在旧版 IE 中不支持，此时可改用背景图方式（background-image + background-size: contain）。
最终效果：无论原始图片多大，都能在固定 header 的指定区域内按比例完整显示，不裁剪、不变形、不溢出。
