Question

我有这两个要素：

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

当我缩小屏幕时，我会将这些元素的高度设置为相同（点击此处类具有背景颜色）但是当我缩小屏幕时，图像会变小并且点击的高度会保持不变同样，我做错了什么？

.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%;
}

Answer 2

你指定的两个div的高度都是97px。您的图像高于其包装div的宽度，因此其高度适应div的宽度（以保持图像宽高比）。

要么调整图像的width / height属性（考虑到这些值中的一个将/应该（？）根据给定的原因计算）或者隐藏div.logo的溢出。

无论屏幕大小如何，CSS都会使两个元素具有相同的高度

2 个答案: