boostrap container image sizes

Question

I have a bootstrap container which shows some images a two column layout. Since not all images have the same aspect ratio, it would be a pain to cut the images to the right ration. better to solve it in code.

My goal is to have all images of a container the same height. and the bigger image will resize to the height of the smaller. then the padding between images will be dynamic. I hope it is clear what I mean by this, otherwise let me know.

A hint from you is highly appreciated -endo

Here is an example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      


<div class="container container-fluid">
         <div class="row w-100">
            <div class="col-lg-12">
               <figure>
                  <img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
               </figure>
            </div>
         </div>
         <div class="row w-100 h-100">
            <div class="col-8">
               <figure>
                  <img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/4523/2262" width="100%">
               </figure>
            </div>
            <div class="col-4">
               <figure>
                  <img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/2100/3000" width="100%">
               </figure>
            </div>
         </div>
         <div class="row w-100">
            <div class="col-lg-12">
               <figure>
                  <img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
               </figure>
            </div>
         </div>
    </div>