根据响应的第一列

Question

对于那些将其标记为重复的人，我并非尝试实现此目的：How can I make Bootstrap columns all the same height?

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

请参阅下面的图片，了解有关我想要实现的目标的更多信息。

Image:

我有2个主要的cols。第一个分为2个，有2个图像555*670。第二列分为另外两列，共有4幅图像。

我希望第二列（266 * 370）中的图像适应第一列。那就是第二列的组合高度应该等于第一列（555 * 670）。第一列中的图像和第二列中的4应该具有相同的高度，同时保持图像的纵横比，并且应该是响应的。

我愿意改变图像的大小以达到这个目的。 这是CodePen的链接。我使用了自举网格，并在图像上将宽度设置为100％。

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

Answer 1

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

Answer 2

如果您将图像添加为背景图像而不是内嵌img标记，我认为您可以更轻松地使用此功能。

例如CSS

.img555 {
    background-image:url('https://dummyimage.com/555X670/C0C0C0/fff');
    background-repeat:no-repeat;
    background-size:contain;
}  

包含的背景大小可能是您想要的，因此不会裁剪图像，您可能需要为引导行设置高度值，以便在删除img标记后它们不会崩溃。

祝你好运！