调整Bulma导航栏中的品牌徽标大小（Angular 7）

Question

我目前无法在没有图像的Bulma CSS导航栏中调整品牌徽标图像的大小。根据文档在图像上设置内联宽度和高度会拉伸图像。如何调整图像大小而不会失真？

navbar.component.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" width="112" height="28"/>
      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>

navbar.component.scss

@import "../../scss/fonts";

.navbar {
  background: #ffaaa6;
}

.navbar-brand {
  font-family: $pacifico;
}