17370845950

本文详解如何让图片在 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%;    /* 防止高度超父容器 */
    obj
  ect-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 的指定区域内按比例完整显示，不裁剪、不变形、不溢出。