Resize bootstrap navbar brand logo keeping proportions

Question

I was wondering if there's a way to dinamically resize the navbar brand logo image to have the exact height of the navbar itself and calculate the width keeping the image proportion.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png"></a>
    </div>

I tried to edit the bootstrap .css adding:

.navbar .brand > img { max-height: 40px; }

or:

.navbar .brand { 
    max-height: 40px;
    max-width: 30%; 
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0; 
}

with no luck, the image remains with the same giant size.

The first one should do the trick, I want these settings to be applied inside the img tag inside the a tag with navbar-brand class, but, even if the css is refreshed correctly, these settings are not applied to my image.

Answer 1

In the CSS you provided, you may be referencing the wrong class name. You would need to override the .navbar-brand class, but you are referencing a .brand class name within .navbar. As such, the styles will not be applied to the element you are wanting it to.

Also, did you try using the class="img-responsive"on the image?

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

Otherwise, take a look at this Stackoverflow article, as it is similar: Bootstrap 3 Navbar with Logo.

Hope this helps your cause.