Bootstrap Brand Image Showing too large - css

Question

Perhaps its my css but my code should show the image in the header at a fixed size. However, it looks like it may be outside of the div. Heres the code.
<div class="row">
<div class="col-md-12 top navbar-fixed-top">
<div class="col-md-6">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 class="img-responsive" src="http://dev-httpwwwrestechsyscom.pantheonsite.io/sites/all/themes/myWay/logo.png"></a>
</div></nav></div>
<div class="col-md-6">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<ul class="menu"><li class="first expanded dropdown active">About Us <span class="caret"></span><ul class="dropdown-menu"><li class="first leaf active">Mission Statement</li>
<li class="leaf">Meet Our Team</li>
<li class="leaf">Testimonials</li>
<li class="last leaf">Sample Athletes Profile</li>
</ul></li>
<li class="leaf">Eligibility</li>
<li class="expanded dropdown">Recruiting <span class="caret"></span><ul class="dropdown-menu"><li class="first leaf">Recruiting FAQ</li>
<li class="last leaf">Recruiting Info</li>
</ul></li>
<li class="last leaf">Services</li>
</ul><li class="active"></li>
</ul>
</div>
</div></div></div>

Answer 1

You can fix it in this way. Just add desired height to brand image and width will be auto based on height. For example:
.navbar-brand img {
height: 30px;
}

Answer 2

You can add a max-height: 100% to the .navbar-brand img element and it will contain the image inside of .navbar-brand. The height of .navbar-brand is 50px from bootstrap's css, so to make it bigger than that, change the height of .navbar-brand
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-brand img {
max-height: 100%;
}
/* add/change this if you want to make the navbar brand area bigger */
.navbar-brand {
height: 100px;
}
</style>
<div class="row">
<div class="col-md-12 top navbar-fixed-top">
<div class="col-md-6">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 class="img-responsive" src="http://dev-httpwwwrestechsyscom.pantheonsite.io/sites/all/themes/myWay/logo.png"></a>
</div>
</nav>
</div>
<div class="col-md-6">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<ul class="menu">
<li class="first expanded dropdown active">About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li class="first leaf active">Mission Statement</li>
<li class="leaf">Meet Our Team</li>
<li class="leaf">Testimonials</li>
<li class="last leaf">Sample Athletes Profile</li>
</ul>
</li>
<li class="leaf">Eligibility</li>
<li class="expanded dropdown">Recruiting <span class="caret"></span>
<ul class="dropdown-menu">
<li class="first leaf">Recruiting FAQ</li>
<li class="last leaf">Recruiting Info</li>
</ul>
</li>
<li class="last leaf">Services</li>
</ul>
<li class="active"></li>
</ul>
</div>
</div>
</div>
</div>