本文详解如何在 position: fixed 的 header 内，通过 css 精确控制 div 容器尺寸及内部 img 元素的自适应缩放，确保 logo 按比例完整显示且不溢出。
当 header 使用 position: fixed 时，其脱离文档流，导致子元素（如 .main-header-logo）无法自然继承高度，进而使 height: 100% 在 img 上失效——这是你遇到“图片无法适配容器”问题的根本原因。
要解决该问题，需同时满足两个条件：
✅ 容器有明确尺寸（否则 100% 高度无参照）
✅ 图片按比例约束缩放（避免拉伸或溢出）
正确做法：显式设定容器高度 + 使用 max-width/max-height
首先，为 .main-header-logo 设置一个确定的高度（例如与 header 行高一致），并确保其父容器（即 fixed header）具有可计算的高度：
.main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4rem; /* 显式定义 header 高度，为子元素提供基准 */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem; /* 可选：增加内边距提升视觉舒适度 */
background: white; /* 建议添加背景色，避免内容透出 */
z-index: 1000; /* 确保 header 层级高于其他内容 */
}
.main-header-logo {
width: 100px;
height: 3rem; /* 明确高度，让 img 的 100% 有据可依 */
display: flex;
align-items: center;
}
.main-header-logo-image {
height: 100%;
max-width: 100%; /* 关键：限制最大宽度，保持比例 */
max-height: 100%; /* 关键：限制最大高度，防止纵向溢出 */
object-fit: contain; /* 可选：确保完整显示且不裁剪（推荐用于 logo） */
}? object-fit: contain 是图像缩放的黄金属性：它在保持宽高比的前提下，将整张图完整显示在容器内，留白优于裁剪，特别适合品牌 logo。
注意事项与最佳实践
- ❌ 避免仅设 width: 100px 而不设 height：此时 .main-header-logo 高度由内容撑开，img { height: 100% } 仍无效；
- ✅ 推荐统一用 rem 或 vh 控制 header 高度（如 4rem 或 6vh），便于响应式调整；
- ✅ 若需响应式适配，可结合媒体查询缩小 logo 尺寸：
@media (max-width: 768px) { .main-header { height: 3.5rem; } .main-header-logo { width: 80px; height: 2.5rem; } } - ✅ 始终为 fixed header 添加 z-index 和背景色，防止滚动时内容穿透；
- ✅ 使用 align-items: center 确保 logo 垂直居中（已包含在原始代码中，但需确认父容器有高度）。
通过以上配置，无论原始 logo 是 200×200px 还是 800×200px，都能在固定 header 中等比缩放、精准居中、安全显示。
