title: Bulma - Navbar logo image is not adapting to the navbar heigh. How can I change the logo image fit?
body: <p>I have just started using Bulma (<a href="https://bulma.io/" rel="noreferrer">bulma.io</a>) and want this <a href="https://preview.ibb.co/bVUFKU/logo_transparent.png" rel="noreferrer">image</a> to resize to the navbar height which I belive by default is 3.25rem (16px base font-size) but it is not.</p>
  
  <p>I have tried resizing the image to 600px x 140px no luck, I have googled around a lot and still cant fix it. Yet if I use the example bulma image which is 600px x 140px it works? Here is the code Using the bulma image</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"&gt;
  
  &lt;nav class="navbar"&gt;
    &lt;div class="navbar-brand"&gt;
      &lt;a  class="navbar-item" href="#"&gt;
        &lt;img src="https://bulma.io/images/bulma-logo.png"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>or <a href="https://jsfiddle.net/dt364rms/" rel="noreferrer">jsfiddle</a></p>
  
  <p>My code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"&gt;
  
  &lt;nav class="navbar"&gt;
    &lt;div class="navbar-brand"&gt;
      &lt;a  class="navbar-item" href="#"&gt;
        &lt;img src="https://preview.ibb.co/bVUFKU/logo_transparent.png" alt="logo_transparent"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>or <a href="https://jsfiddle.net/5nfyhm1g/" rel="noreferrer">jsfiddle</a></p>