Scale image to 100% height of div within WordPress

Question

I'm trying to force an image to scale to 100% the height of its parent div however WordPress is doing something so that the image doesn't scale when the browser changes size.

I've linked to the image statically as follows:

<div id="homepage1" class="row pt">
    <div class="col-lg-4 col-lg-offset-4 centered">
        <img class="homepage-logo" src="<?php echo get_template_directory_uri() ?>/images/homepage-logo.png" height="100%">
    </div>
</div>

And I've set CSS for the image and parent div:

#homepage1 {
    background: #eee7d5;
    height: 100vh;
}
#homepage1 img {
    max-height: 100% !important;
    max-width: 100%;
}

The #homepage1 div will adjust to 100% of the browser window's height when the page is loaded, however the image is 671px high and if #homepage1 is less than this then the image will spill beyond its boundary. I want the image to scale to whatever height #homepage1 is.

The site I'm working on can be seen at www.heartinhand.com.au . Any suggestions greatly appreciated.

Answer 1

Add to your css:

.col-lg-4.col-lg-offset-4.centered
{
    height: 100%;
}

Answer 2

您需要为图像添加100％的高度，如下所示：

.homepage-logo { height: 100%; }