Bootstrap 3 'img-responsive' class not so responsive

Question

Update: Here is the latest jsFiddle.

---

You'll likely need to resize the Result pane, or even break it out into its own window, in order to see it in all its glory.

As you can see, I have a 400x200 logo image that I have attempted to make responsive (via the .img-responsive class), however it continues to remain the same size (400x200) and is not resizing + nesting nicely into my header navbar.

Ideally the image should resize and fit inside the navbar right in line with the menu items (MUCH AMAZE, SUCH WOW, etc.).

I have a feeling that it has something to do with this part:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>

I'm not really sure what this "Toggle navigation" <button/> is doing (the one that comes right before my logo <img/>). Admittedly, I am cargo culting here and just got some generic Bootstrap 3 code off their examples site. Am I applying the wrong styling rules? Do I need to put the <img/> in a form or div or some other type of container here? Where am I going awry?

Answer 1

add this may help you

.img-responsive
{
width:100%;
}