html - 根据响应式第一列的高度设置后续列的高度

Question

对于那些将其标记为重复的人，我并不是要实现这一点:How can I make Bootstrap columns all the same height?

我在处理响应式图像的同时保持纵横比，处理图像与仅仅扩大一列不同。

请参阅下图以了解有关我正在努力实现的目标的更多信息。

Image:

我有 2 个主要列。第一个一分为二，有 2 张图片 555*670。第二列又分为两列，每列有 4 张图片。

我想让第二列(266*370)的图片适应第一列。也就是说，第二列的组合高度应等于第一列 (555*670)。第一列中的图像和第二列中的 4 个图像应该具有相同的高度，同时保持图像的纵横比并且应该是响应式的。

我愿意接受诸如更改图像大小以实现此目的的建议。这是 CodePen 的链接.我使用 Bootstrap 网格并将图像的宽度设置为 100%。

.img370{
   width:100%;
}
.img555{
   width:100%;
}

Answer 1

.row{overflow:hidden;}
.col-* {
     margin-bottom: -99999px;
     padding-bottom: 99999px !important;
}