我有这两个元素:
<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%;
}
最佳答案
您的 div 有一个 97px
高度,但里面的图像没有。相反,它有一个宽度,因此它会相应地调整高度以保持比例。
您可以简单地指示图像具有 max-height: 100%;
.logo img {
width:100%;
max-height: 100%;
}
但为了保持图像的比例,然后删除宽度定义,并将 max-height
更改为 height: 100%;
.logo img {
height: 100%;
}
关于jquery - CSS 使两个元素具有相同的高度,而不管屏幕大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26766472/