将图像缩放到 WordPress 中 div 的 100% 高度

Question

我试图强制图像缩放到其父级div 的高度的 100%，但是 WordPress 正在做一些事情，以便在浏览器改变大小时图像不会缩放。

我已经静态链接到图像如下：

<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>

我已经为图像和父 div 设置了 CSS：

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

当页面加载时，#homepage1 div 将调整为浏览器窗口高度的 100%，但是图像的高度为 671px，如果#homepage1 小于此值，则图像将溢出其边界。我希望图像缩放到#homepage1 的任何高度。

可以在www.heartinhand.com.au 看到我正在开发的网站。任何建议都非常感谢。

Answer 1

添加到您的 CSS：

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

Answer 2

您需要为图像添加 100% 的高度：

.homepage-logo { height: 100%; }