jquery - CSS 使两个元素具有相同的高度，而不管屏幕大小

Question

我有这两个元素:

<div class="logo"><img src="images/logo.jpg" /></div>
<div class="click-here"></div>

当我缩小我的屏幕时，我希望这些元素的高度大小相同(click-here 类有背景色)但是当我缩小我的屏幕时，图像变小并且 click-here 的高度保持不变一样，我做错了什么？

.logo {
        height:97px;
        width:24.4%;
        float:left;
}

.logo img {
        width:100%;
}

.click-here {
        text-align:center;
        font-family: 'MinionPro-Regular';
        font-weight:normal;
        font-size:1.5em;
        color:#FFF;
        background-color:#CF1F2E;
        height:97px;
        float:right;
        width:75%;
}

Answer 1

您的 div 有一个 97px 高度，但里面的图像没有。相反，它有一个宽度，因此它会相应地调整高度以保持比例。

您可以简单地指示图像具有 max-height: 100%;

See here

.logo img {
    width:100%;
    max-height: 100%;
}

但为了保持图像的比例，然后删除宽度定义，并将 max-height 更改为 height: 100%;

See here

.logo img {
    height: 100%;
}