Bootstrap navbar height with logo

Question

This, brought to me many problems, such as, How can I put the logo without resize it?

When the page gets narrow, the logo is not getting smaller, and is overlapping the navbar.

There are some similar questions over the web, but I'am trying it by hours, no success yet.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <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="brand" href="index.php">
                    <img src="../Content/Images/logo.png212x30">
                </a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#services">Services</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

CSS:

.navbar .brand { max-height: 40px; overflow: visible;padding-top: 0;padding-bottom: 0; }

Answer 1

add a class to image tag img-responsive like

<img src="...///css/wahtever.jpeg" class="img-responsive" />

and also you can find the docs for the responsive images in bootstrap 3 documentation

getbootstrap.com/css/#images-responsive