Bulma-Navbar徽标图像不适应导航栏高度。 如何更改徽标图像适合度？

Question

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

Answer 1

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>