CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 3989

How to confine img dimensions to its parent div?

I'm trying to set the "Nelson Mazda" png to fit within the limits of the navbar, but it's showing larger than the navbar as you can see in the screenshot. I tried setting the max-height and max-width of .brand-logo to 100%, but this doesn't seem to be fixing it. What am I missing?

Note: nav-wrapper is set to the same height as the navbar, so setting .brand-logo's height to 100% of it should theoretically work, right?

enter image description here

HTML:

 <!-- Navigation bar -->
    <div class="navbar-fixed" id="nav">
        <nav>
            <div class="nav-wrapper">
                <!-- Site name -->
                <a href="/" class="brand-logo"><span class="tighter"><img src="images/NelsonMazdaLogo.png"></a>
            </div>
        </nav>
    </div>

CSS:

nav {
    background-color: rgba(255, 255, 255, .95);

    .brand-logo,
    ul a {
        color: $black;
        padding: 0 15px;
    }

    .brand-logo {
        font-weight: 400;
        letter-spacing: -2px;
        height: 100%;
        max-width: 100%;

        .tighter {
            letter-spacing: -3px;
        }
    }
}

Upvotes: 1

Views: 976

Answers (2)

Bryan Willis
Bryan Willis

Reputation: 3642

Your outer nav has to have a height or width.

See these examples: http://codepen.io/bootstrapped/details/KwYGwq/

.brand-logo {
    height: 50px; /* set to height you want image to be constrained to */
}

.brand-logo img {
    height:100%;
    width:auto;
}

Plus you have a random span tag that isn't closed.

 <div class="navbar-fixed" id="nav">
        <nav>
            <div class="nav-wrapper">
                <!-- Site name -->
                <a href="/" class="brand-logo">
                    <span class="tighter"><img src="images/NelsonMazdaLogo.png"></span><!-- missing closing span tag -->
                </a>
            </div>
        </nav>
    </div>

The key thing to think about is when you say 100% you have to think, 100% of what exactly? It needs to be inside a parent or grandparent element that has an actual height.

Also if your image itself wasn't cropped properly it could be adding transparent space around the logo. If the above solution doesn't work, try downloading your image and cropping it to make sure it's actually cropped to the logo edges.

You can also try object-fit:

object-fit: contain;
width: 100%;

Upvotes: 2

mani
mani

Reputation: 3096

set max-height and max-width on the img itself

.brand-logo img {
    max-height:100%;
    max-width:100%;
}

Upvotes: 3

Related Questions