对于那些将其标记为重复的人,我并不是要实现这一点:How can I make Bootstrap columns all the same height?
我在处理响应式图像的同时保持纵横比,处理图像与仅仅扩大一列不同。
请参阅下图以了解有关我正在努力实现的目标的更多信息。
我有 2 个主要列。第一个一分为二,有 2 张图片 555*670
。第二列又分为两列,每列有 4 张图片。
我想让第二列(266*370)的图片适应第一列。也就是说,第二列的组合高度应等于第一列 (555*670)。第一列中的图像和第二列中的 4 个图像应该具有相同的高度,同时保持图像的纵横比并且应该是响应式的。
我愿意接受诸如更改图像大小以实现此目的的建议。 这是 CodePen 的链接.我使用 Bootstrap 网格并将图像的宽度设置为 100%。
.img370{
width:100%;
}
.img555{
width:100%;
}
最佳答案
.row{overflow:hidden;}
.col-* {
margin-bottom: -99999px;
padding-bottom: 99999px !important;
}
关于html - 根据响应式第一列的高度设置后续列的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46233991/