iOS Safari中导航栏图片不遵循CSS尺寸规则的问题求助

针对iOS Safari里导航栏图片无视CSS规则、宽度变为100vw的问题，试试下面几个可行的方案：

• 给图片添加宽度约束
  仅设置高度时，iOS Safari可能会错误计算图片宽度。补充width: auto保持原始宽高比，再加max-width: 100%限制最大宽度，避免撑满视口：

  #mainLogo {
      height: 40px;
      width: auto;
      max-width: 100%;
  }
  
  @media screen and (min-width: 768px) {
      #mainLogo {
          height: 50px;
      }
  }
  

• 限制父元素的布局行为
  父元素.navbar-brand是flex容器，iOS Safari的flex布局逻辑可能导致图片被强制拉伸。给父元素添加样式防止压缩，让它贴合图片实际尺寸：

  .navbar-brand {
      flex-shrink: 0;
      max-width: fit-content;
  }
  

• 用object-fit控制图片适配
  加上object-fit: contain确保图片在设定高度内正确显示，不会变形或超出容器：

  #mainLogo {
      height: 40px;
      width: auto;
      object-fit: contain;
  }
  

你可以让反馈问题的用户帮忙测试效果，或者用在线跨浏览器测试工具验证这些方案的有效性。

内容的提问来源于stack exchange，提问作者starleaf1