NavbarBrand图片默认撑满高度导致变形，因Bootstrap未限制.img尺寸，需用height+object-fit控制；推荐自定义类名并配合rem单位与flex对齐优化。
NavbarBrand 图片默认撑满高度导致变形
Bootstrap 的 NavbarBrand 默认把图片当内联元素处理，不设 max-height 或 height 时，图片会按原始尺寸渲染，常顶破导航栏高度、拉高整个 navbar，甚至在小屏下溢出。
根本原因是 Bootstrap（v5.x）对 .navbar-brand > img 只加了 vertical-align: middle，没限制尺寸。必须手动干预。
- 最简方案：给图片加
height: 1.5rem（匹配navbar行高），再配object-fit: contain保比例不裁剪 - 若需响应式缩放，用
max-height: 2.5rem+height: auto，避免大图在移动端糊掉 - 别只写
width: 100%——这会让宽图横向拉伸，破坏比例
用 object-fit 控制图片填充方式
object-fit 是解决品牌图缩放的核心 CSS 属性，但容易被忽略兼容性：IE 完全不支持，Edge 16+ 才支持。生产环境若需兼容 IE，得 fallback 到背景图方案。
-
object-fit: contain：完整显示，留白；适合 logo 有透明边距或需要清晰识别的场景 -
object-fit: cover：等比裁剪填满；适合横幅型 logo，但可能切掉边缘内容 - 必须配合
width和height同时设置（哪怕其中一个为auto），否则object-fit不生效
示例：
<img src="logo.svg" class="navbar-brand-img" alt="Bootstrap 导航栏品牌图片缩放 NavbarBrand样式" >
.navbar-brand-img {
height: 2rem;
width: auto;
object-fit: contain;
}
响应式中图片尺寸突变的常见原因
很多人在 @media (max-width: 768px) 里重设 height，却发现 navbar 高度跳变、文字错位——问题常出在未同步调整 line-height 或父容器 padding。
- Bootstrap
.navbar在小屏下默认加了padding: 0.5rem 1rem，而图片height: 2rem可能已超出该区域，触发内部 flex 布局重排 - 建议统一用
rem单位，并让图片高度 ≤navbar的min-height（v5 默认是56px≈3.5rem） - 如果用
background-image替代<img alt="Bootstrap 导航栏品牌图片缩放 NavbarBrand样式" >，记得移除原<img alt="Bootstrap 导航栏品牌图片缩放 NavbarBrand样式" >的src，否则仍会发起请求
自定义类名比覆盖 .navbar-brand img 更安全
直接写 .navbar-brand img { ... } 看似省事，但一旦项目升级 Bootstrap 版本，或引入第三方组件（比如某些 UI 库也用 .navbar-brand），样式就容易冲突或失效。
- 推荐给图片加专属类，如
class="navbar-logo"，然后写.navbar-logo { ... } - 如果必须复用
.navbar-brand结构，至少用属性选择器限定：.navbar-brand > img[src$=".svg"] - 避免用
!important强行覆盖——它会让后续调试成本翻倍，尤其在多人协作项目中
真正麻烦的不是怎么缩放图片，而是缩放后和右侧导航项的垂直对齐。flex 布局下，align-items: center 看似万能，但图片 baseline 和文字 baseline 天然不一致，这时候 vertical-align: middle 或 margin-top: -0.125rem 往往比调 align-items 更直接有效。
