image height 100% comes out larger than div

Question

I'm trying to make an image inside a div that is always 100% of the height, with the width proportional. But when I set the height to 100% it comes out larger than the div. Am I misunderstanding what height 100% means?

Here's the css:

#whoami_bg {
    position: absolute;
    left: 3%;
    top: 26%;
    width: 45%;
    height: 35%;
    background: rgba(50, 204, 239, 0.4);
}
#whoami_bg img {
    height: 100%;
    width: auto;
    display: block;
    margin: 0 auto;
}

And here is the html:

<div id="whoami_bg">
    <br /> <a href="whoami.html">
        <img src = "images/whoami_image.gif" />
    </a>
</div>

It does scale, but it scales too big. This happens in chrome and safari at least. I have tried giving the image a class = "whoami" and putting the style in an img.whoami tag, but it works the same. For some reason my images have decided to give 110%. :P

It seems simple; how do I make my image 100% the height of my div?

Answer 1

Remove this tag from your code:

<br />

It pushes your <a> with the content down and it overflows it's parent container.

Answer 2

Your <br /> tag is disrupting the flow of these elements. In general, you should avoid using these except for text-only elements. Removing this tag fixes the height issue:

<div id = "whoami_bg">
    <a href = "whoami.html">
        <img src = "images/whoami_image.gif" />
    </a>
</div>

JSFiddle