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

Question

我试图强制图片缩放到其父div的高度的100％，但WordPress正在做一些事情，以便在浏览器更改大小时图像不会缩放。< / p>

我已静态链接到图像，如下所示：

<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％，但图像高671像素，如果#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%; }