I need to resize pictures in 2 different div elements stacked over each other. These elements are on the right side of another larger column. I want them to maintain exactly 50% height of the other left column at all times. This should cause the images in the right 2 column to shrink to fit and maintain image ratio.
Still learning html, javascript, and css. I have tried several variations of setting height and object-fit on css with no luck so far. Either the image grows back to full height or shrinks way too small. Can hard code the heights but that goes against the responsive layout and want to figure out how to do this a good way.
<body>
<div class="row">
<div class="col-md-2" style="height: 15vh">
<img class="fill" src="">
</div>
<div class="col-md-8 main-title-container bg-gradient" style="height: 15vh">
<div id="fileTitle" class="main-title text-center align-middle">Title</div>
</div>
<div class="col-md-2" style="height: 15vh">
text3
</div>
</div>
<div class="row">
<div class="col-md-8" style="height: 77vh">
<div class="container-fluid remove-all-margin">
text4
</div>
</div>
<div class="col-md-4">
<div class="row h-100 flex-column">
<div class="flex-fill bg-info ">
<img src="" alt="...">
</div>
<div class="flex-fill bg-success">
<img src="" alt="..." </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 bg-danger" style="height: 8vh">
text1
</div>
<div class="col-md-4 bg-secondary" style="height: 8vh">
text2
</div>
</div>
</body>
