title: Resizing brand logo in Bulma navbar (Angular 7)
body: <p>I am currently unable to resize the brand logo image in my Bulma CSS navbar without the image. Setting an inline width and height on the image per the documentation stretches the image. How do I resize the image without distortion? </p>
  
  <p>navbar.component.html</p>
  
  <pre><code>&lt;nav class="navbar" role="navigation" aria-label="main navigation"&gt;
    &lt;div class="navbar-brand"&gt;
      &lt;a class="navbar-item" href="#"&gt;
          &lt;img src="../assets/images/my-image.png" width="112" height="28"/&gt;
        Brand Name
      &lt;/a&gt;
      &lt;a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"&gt;
        &lt;span aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span aria-hidden="true"&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>navbar.component.scss</p>
  
  <pre><code>@import "../../scss/fonts";
  
  .navbar {
    background: #ffaaa6;
  }
  
  .navbar-brand {
    font-family: $pacifico;
  }
  </code></pre>