要使两个div具有相同的高度,其中一个是图像而另一个是纯文本内容,可以使用CSS的flexbox布局来实现。以下是实现的步骤:
<div class="container">
<div class="image-div">
<!-- 图像内容 -->
</div>
<div class="text-div">
<!-- 文本内容 -->
</div>
</div>
.container {
display: flex;
}
.image-div, .text-div {
flex-grow: 1;
padding: 10px;
}
.image-div img {
width: 100%;
height: 100%;
object-fit: cover;
}
这样,两个div将会具有相同的高度,无论图像的高度如何变化。请注意,上述代码没有使用JavaScript,而是使用了纯CSS来实现相等高度的效果。
参考腾讯云相关产品推荐:腾讯云基础云服务器(CVM),适用于构建互联网应用、游戏服务、企业办公等场景。了解更多详情,请访问腾讯云官网:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云