Resize Logo Upload

Question

I was wondering if there is a way to dynamically change the size of the logo of the navigator logo in order to have the exact height of the navigation panel itself and calculate the width while maintaining the image proportions.

<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 boot .css file by adding:

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

or

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

without luck, the image remains with the same gigantic size.

The first one should do the trick, I want these parameters to be applied inside the img tag inside the tag navbar-brand, but even if css is updated correctly, these settings do not apply to my image.

Answer 1

CSS . .navbar-brand, .brand .navbar. , , .

, class="img-responsive" ?

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

Stackoverflow, : Bootstrap 3 Navbar .

, .

Answer 2

, bootstrap css

@media (* ) { // }