本文详解如何让图片在 fixed 定位的 header 中自适应其父级 div 容器，通过 `max-width`/`max-height` 配合 `height: 100%` 实现等比缩放与边界约束，避免溢出或拉伸失真。
当 提供有效的百分比参考高度。你尝试的 height: 100% 失效，正是因为 .main-header-logo 自身高度为 auto，而 100% 高度需依赖父容器有明确高度值——但 .main-header 是 fixed 定位且未设 height，其子 div 便无法继承有效高度。
✅ 正确解法是放弃对父 div 强制设高，转而用 max-width 和 max-height 约束图片自身，配合 height: 100% 触发等比缩放逻辑：
.main-header-logo-image {
height: 100%; /* 优先按高度填满父容器 */
max-width: 100%; /* 但宽度不超过父容器宽度 */
max-height: 100%; /* 且高度不超过父容器高度 */
object-fit: contain; /* 可选：保持宽高比，完整显示（不裁剪） */
}同时，确保 .main-header-logo 具备可测量的尺寸上下文。由于 .main-header 是 fixed 且横向铺满（left: 0; right: 0），建议为其设置明确高度（如 height: 3rem），并让 logo 区域按需分配空间：
.main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3rem; /* 关键：提供高度基准 */
display: flex;
justify-content: space-between;
align-items: center;
background: white; /* 建议添加背景，避免内容透出 */
z-index: 1000; /* 防止被其他元素遮挡 */
}
.main-header-logo {
width: 80px; /* 显式宽度，避免 flex 压缩异常 */
height: 2rem; /* 显式高度，为 img 的 100% 提供依据 */
}⚠️ 注意事项：
- 不要仅依赖 width: 100% 或 height: 100% —— 它们需父容器有确定尺寸；
- max-width/max-height 是“约束上限”，配合 height: 100% 才能实现在不溢出前提下的最大填充；
- 若希望图片始终居中且不拉伸，object-fit: contain 比 cover 更安全；若需铺满无留白，改用 object-fit: cover 并配合 width: 100%; height: 100%；
-
固定定位 header 会覆盖下方内容，务必为
或首个非 fixed 元素添加 margin-top（值 ≥ header 高度）以预留空间。
最终效果：无论原始图片多大，它都会在 .main-header-logo 区域内等比缩放、完整显示，且严格适配固定 header 的布局上下文。
