Angular 7中如何在Bulma导航栏无损调整品牌Logo尺寸

我之前在用Bulma做导航栏时也踩过这个坑——直接给<img>加内联width和height确实会让图片比例失调、拉伸变形。下面给你两个实用的解决方案：

方法1：用object-fit强制保留图片比例 #

object-fit是CSS专门用来控制媒体元素（比如图片）在容器内适配方式的属性，能让图片按原始比例缩放，不会被强行拉伸。

你可以保留HTML里的内联尺寸（或者移到CSS里更规范），然后在SCSS里添加这几行：

@import "../../scss/fonts";
.navbar {
  background: #ffaaa6;
}
.navbar-brand {
  font-family: $pacifico;
}
/* 修复Logo拉伸核心样式 */
.navbar-item img {
  width: 112px;
  height: 28px;
  object-fit: contain; /* 让图片完整显示，按比例适配容器 */
  object-position: center; /* 可选：让图片在容器内居中 */
}

• 如果你的Logo是透明背景，object-fit: contain会完美保留比例，容器剩余空间留空；
• 要是需要图片填满容器（允许裁剪边缘），可以换成object-fit: cover。

方法2：用max-width/max-height让图片自然缩放 #

另一种更稳妥的思路是不强制固定尺寸，而是用最大宽高限制图片的显示上限，让图片自动按原始比例缩放：

先去掉HTML里的内联尺寸：

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="../assets/images/my-image.png" alt="Brand Logo"/>
      Brand Name
    </a>
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
</nav>

然后在SCSS里添加限制样式：

@import "../../scss/fonts";
.navbar {
  background: #ffaaa6;
}
.navbar-brand {
  font-family: $pacifico;
}
.navbar-item img {
  max-width: 112px;
  max-height: 28px;
  width: auto;
  height: auto; /* 确保图片按原始比例自动缩放 */
}

这种方式会让图片以不超过你设定的最大宽高的尺寸自然显示，完全不会变形。

为什么原始方法会拉伸？ #

Bulma默认给.navbar-item img设置了max-height: 2.5rem的样式，当你手动强制设置width和height时，会覆盖这个默认逻辑，导致图片忽略原始比例被强行拉伸。上面两种方法都能避开这个问题。

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