找到你要的答案

Q:Scale image to 100% height of div within WordPress

Q:图像高度在WordPress 100% DIV

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.

我试图强迫一个图像尺度100%的父div但是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。任何建议大大赞赏。

answer1: 回答1:

Add to your css:

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

添加到您的CSS:

.col-lg-4.col-lg-offset-4.centered
{
    height: 100%;
}
answer2: 回答2:

You need to add a height of 100% to your image as:

.homepage-logo { height: 100%; }

您需要添加一个高度为100%的图像:

.homepage-logo { height: 100%; }
html  css