title: Resize bootstrap navbar brand logo keeping proportions
body: <p>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.</p>
  
  <pre><code>&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;&lt;img alt="Brand" src="images/logo.png"&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I tried to edit the bootstrap .css adding:</p>
  
  <pre><code>.navbar .brand &gt; img { max-height: 40px; }
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>.navbar .brand { 
      max-height: 40px;
      max-width: 30%; 
      overflow: visible;
      padding-top: 0;
      padding-bottom: 0; 
  }
  </code></pre>
  
  <p>with no luck, the image remains with the same giant size.</p>
  
  <p>The first one should do the trick, I want these settings to be applied inside the img tag inside the a tag with <code>navbar-brand</code> class, but, even if the css is refreshed correctly, these settings are not applied to my image.</p>