CSS Bootstrap Navigation with massive logo - html

Question

I have created a navigation with Bootstrap's CSS. It was working great until I added images (logo & award logos). The 3 images I added are 471x249, 251x117 & 275x300 and when I look at the navigation the images are massive. I noticed this line:
.nav>li>a>img {
max-width: none;
}
I tried playing around with the max-width and that just makes it look worse.
Here is the full nav:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a href="#" class="navbar-brand">
<img src="http://2014violadepc.en.ecplaza.net/logo.jpg" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Communities
</li>
<li>Pronto
</li>
<li>Gallery
</li>
<li>Virtual Tours
</li>
<li>Design Centre
</li>
<li>Customer Care
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<img src="http://itg-instructor-training.co.uk/Images/images/images/banner_01_01.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://arabbrains.com/wp-content/uploads/2013/03/emc-logo1-275x300.jpg" />
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Any suggestions to fix this issue with images?

Answer 1

You are trying to assign a max-width property without specifying the height.
Just change this line:
<img src="images/logo.jpg" />
to this
<img class="img-responsive" src="images/logo.jpg" alt="" />
and change those max-width properties you edited earlier back to their original values and it should work fine.
Now the image size will be valued (while maintaining aspect ratio) according to the height of the navbar-header.
---- UPDATE ----
I checked your fiddle and noticed a certain class where you wrote collapse instead of toggled. I have also set a max-height property for your images which you can change accordingly.
Here is a jsfiddle: http://jsfiddle.net/AndrewL32/z08oyjva/

Answer 2

Try setting the width of the images to 100%:
.navbar-brand img {
width: 100%;
}