Bulma - Navbar logo image is not adapting to the navbar heigh. How can I change the logo image fit?

I have just started using Bulma (bulma.io) and want this image to resize to the navbar height which I belive by default is 3.25rem (16px base font-size) but it is not.

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<nav class="navbar">
  <div class="navbar-brand">
    <a  class="navbar-item" href="#">
      <img src="https://bulma.io/images/bulma-logo.png">
    </a>
  </div>
</nav>

or jsfiddle

My code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<nav class="navbar">
  <div class="navbar-brand">
    <a  class="navbar-item" href="#">
      <img src="https://preview.ibb.co/bVUFKU/logo_transparent.png" alt="logo_transparent">
    </a>
  </div>
</nav>

or jsfiddle

Solution

The logo image you are referring to is 640x640 with white space, either you crop the logo image or use it as background-image as shown below

.navbar-item {
  background: url(https://preview.ibb.co/bVUFKU/logo_transparent.png) no-repeat center center;
  background-size: cover;
  width: 152px
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<nav class="navbar">
  <div class="navbar-brand">
    <a  class="navbar-item" href="#"></a>
  </div>
</nav>