Html 被div截断的内容

我试图调整大小并保持div中内容的纵横比，但它似乎不起作用

<div class="main-wrapper d-flex">
<div class="horizontal-img-stack">
    <div class="col-6">
        <div class="row">
            <h4>Wall Detection</h4>
            <img class="w-100" src="{{ color_image }}">
        </div>
    </div>
    <div class="col-6">
        <div class="row">
            <h4>Final</h4>
            <img class="w-100" src="{{ final_image }}">
        </div>
    </div>
</div>

---

我已经尝试了很多建议，但我已经被困了好几天。谢谢

看起来它只是根据每个图像的容器来调整大小的一种情况。尝试将此添加到CSS：

.w-100{
宽度：100%；
高度：自动；
}

.main-wrapper{
    flex-wrap: wrap-reverse;
    height: auto;
}
.horizontal-img-stack {
    align-items: center;
    display: inline-flex;
}