被div截斷的內容

Question

我正在嘗試調整 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：

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

我已經嘗試了許多建議，但我已經被困了好幾天。 謝謝

Answer 1

看起來這只是根據其容器調整每個圖像大小的一種情況。 嘗試將其添加到 CSS：

.w-100 {
  width: 100%;
  height: auto;
}