Css 带Boostrap和Flexbox的等柱高度

我正在尝试使用引导和Flexbox设计一个图库，其中有一个大图像，旁边是两个较小的堆叠图像，并且高度相同

容器列似乎在做它们的工作并保持相同的高度，但我需要列中的

img

来填充容器的高度

如果我在

img

上使用

height:100%

，它可以在Firefox中使用，但在Chrome和Safari中都会出现这种情况

img{
最大宽度：100%；
宽度：自动\9；
高度：自动；
垂直对齐：中间对齐；
边界：0；
-ms插值方式：双三次插值；
}
身材{
页边距底部：0；
}
.rts col{
边缘底部：30px；
}

---

在我看来，似乎您需要嵌套的FlexBox，其中一侧有多个图像

img{
最大宽度：100%；
宽度：自动\9；
高度：自动；
垂直对齐：中间对齐；
边界：0；
-ms插值方式：双三次插值；
}
身材{
保证金：0；
}
.rts-col.split{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}

---

如果将

col-4

制作成具有

列

方向的柔性容器，则可以使用

对齐内容

及其

之间的空间

来对齐这两个图像的上下

将

d-flex-column justify-between

添加到您的

中，使其成为

请注意，我还删除了一些页边距，以便更好地对齐

img{
显示：块；
最大宽度：100%；
}
身材{
保证金：0；
}
.rts col{
边缘底部：30px；
}

@Paulie\u D我没有意识到我可以将代码插入我的问题中。我刚刚更新了我的问题，加入了最小的代码标记。你和@LGSon基本上有相同的解决方案，但为了减少HTML标记中的类，我选择了你的解决方案。干杯非常感谢！我最终选择了@Paulie_D解决方案来保持我的HTML稍微干净一点。@Tyloreimer很好，但不要这样，HTML中的3个类比创建额外的CSS规则小，这就是使用框架的全部意义。。。为了更容易在标记中看到正在发生的事情，我实际上只对基本网格使用了精简版的引导。无论如何，我都必须添加这些额外的类，所以在一个类中添加样式更简单。