Bootstrap 3 navbar collapsing to two lines instead of shrinking images - css

Question

This looks great:
http://imageshack.us/a/img96/5789/n4u7.png
But when you shrink another 5 pixels, the columns appear to break and the image goes to a new line.
http://imageshack.us/a/img59/2195/uk4v.png
Instead, I would like the image to shrink, so it can stay on the same line as the collapsible button.
The HTML:
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<!-- container -->
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="assets/img/logo.png" >
</a>
</div>
<!-- /navbar header -->
<!-- collapse -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<!-- /collapse -->
</div>
<!-- container -->
</nav>
<!-- /navbar -->
The CSS:
nav.navbar {
padding-top: 0;
padding-bottom: 0;
background: rgba(179, 153, 255, .5)
}
nav.navbar div.container {
background: rgba(179, 153, 255, 1.0);
border: 1px solid black;
}
a.navbar-brand {
padding: 0 0 20px 15px;
}
img.img-responsive {
width: 100%;
}
#media (min-width: 992px) {
ul.navbar-nav li a {
padding-top: 12px;
padding-bottom: 12px;
border-top: 2px solid white;
border-bottom: 2px solid white;
margin-top: 36px;
}
}

Answer 1

If you want the image to shrink when you make the viewport smaller, the width of the image's containing element needs to be set as a percentage. In this case the image's immediate containing element is the anchor, so if you set that anchor width of 60% or whatever works, then when the viewport shrinks, the anchor width will shrink to maintain its 60% of its container, and the image with its width of 100% of the anchor will also shrink. Anchor will need to have block level display too.