Bootstrap Responsive Image Attempts Behave Differently In Safari, Chrome, FF - html

Question

I am trying to style an image that should fit into a navigation bar of a site and serve as the logo. The problem I am having is that it appears differently in the three main browsers.
To be explicit, when I play with the height property and make the image appear well in FF, it becomes too out-of-size for Safari and vice versa. When it comes to Chrome, the behavior is even stranger. For some reason, it simply refuses to even acknowledge that the pertinent class exists. When I check in Page Source Code and navigate to the CSS in question, the class is not there. The class that is missing is called .logo-img in the code below.
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<img src="{% static "tshirt-theme/img/logo-kindbook.png" %}" class="logo-img" alt="Shirt Store">
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn">Menu<i class="fa fa-align-justify"></i></button>
</div>
</div>
rest is omitted for brevity
CSS:
.navbar-default {
background-color: #ffffff;
border-bottom-color: transparent;
}
.navbar-default .navbar-brand {
color: #333333;
}
img.logo-img {
height: 300%; !important
}
.logo-img > img {
height: 300%; !important
}
Please forgive the !important as I was using it in attempts to troubleshoot and hack something together.
Firefox:
Safari:
Chrome:
Image blows up to its full resolution and occupies the entire page.
The question is why does this happen (especially Chrome not registering the CSS class) and how could I come up with something that will be cross-browser-compatible?

Answer 1

If you are using bootstrap 3 then you should reduce then image size and then remove the navbar-brand padding.
For further details bootstrap navbar
.navbar-brand {
padding: 0px !important;
}
.largeImg .navbar{
min-height:151px;
}
.largeImg .navbar-nav>li>a{
padding-top:65px;
padding-bottom:65px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<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" aria-expanded="false">
<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 src="http://www.placehold.it/70x50"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="largeImg">
<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" aria-expanded="false">
<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 src="http://www.placehold.it/150x150"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>