Content cut off by div

Question

I am trying to resize and keep aspect ratio of contents in my div but it does not seem to work.

<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;
}

I have tried many of the suggestions and I have been stuck for days. Thanks

Answer 1

It looks like it's just a case of sizing each image according to its container. Try adding this to the CSS:

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