How do i make my logo fit in my nav bar?

Question

I have a big transparent logo and i placed it in place of the old logo that came with the theme i downloaded but it doesn't scale according to the navigation bar

I can reduce the size of the logo in photoshop but i feel like that's not the best way to fix this issue

Here's the code i have for the logo

<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a></div>

How do i fix the logo so it fits inside of my nav bar..

Here's my entire nav bar html

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <!-- Logo -->
            <a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a>
        </div>

        <!-- Navmenu -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#home">Home.</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menus.</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="./breakfast.html">All Day Breakfast</a></li>
                        <li><a href="./lunch.html">Lunch</a></li>
                        <li><a href="./childrenmenu.html">Children's Menu</a></li>
                        <li><a href="./coffeeandcake.html">Coffee and Cakes</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#about">Location.</a>
                </li>

                <li>
                    <a href="#cater">Catering.</a>
                </li>
                <li>
                    <a href="#about">About.</a>
                </li>

                <li><a href="#contact">Contact.</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

In general, whenever you're playing around with the fitting of an image, these are the four CSS attributes you're looking for.

.img-responsive {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 250px;
}

In my snippet, we're telling the image to automatically size itself. <img> tags will try to retain aspect ratio unless explicitly instructed otherwise. The two max- attributes dictate the largest dimensions we want. If we upload an image that's 300px wide and 72px tall, for instance, it will end up smaller than our maximum height and at 250px wide.

To vertically center the image, you'll want to do this:

line-height: 72px; /* whatever the fixed height of the bar is */
vertical-align: middle;

If your image is the exact height of the navbar, try using vertical-align: top if that looks off.