JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>
    bez nastavení výšky
  </p>
  <div class="container">
    <div class="col">
      <img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fmedia-cdn.tripadvisor.com%2Fmedia%2Fphoto-s%2F03%2F9b%2F2f%2Ff1%2Fnice.jpg&f=1" alt="">      
    </div>
    <div class="col">
      <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" alt="">
    </div>
    <div class="col">
      <img src="https://i.pinimg.com/originals/f4/a8/ac/f4a8ac1a2d768fdfbc73dd35f93a9292.jpg" alt="">
    </div>
  </div>
   <p>s nastavením výšky (100px)</p>
  <div class="container is-max-height">
    <div class="col">
      <img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fmedia-cdn.tripadvisor.com%2Fmedia%2Fphoto-s%2F03%2F9b%2F2f%2Ff1%2Fnice.jpg&f=1" alt="">      
    </div>
    <div class="col">
      <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" alt="">
    </div>
    <div class="col">
      <img src="https://i.pinimg.com/originals/f4/a8/ac/f4a8ac1a2d768fdfbc73dd35f93a9292.jpg" alt="">
    </div>
  </div>
  <p>opět s nastavením výšky, pomocí object-fit můžete obrázky takto rozáthnout a nastavit jim libovolný bod jak se má pohled vycentrovat</p>
  <em>50% 50% (střed)</em>
  <div class="container is-of">
    <div class="col">
      <img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fmedia-cdn.tripadvisor.com%2Fmedia%2Fphoto-s%2F03%2F9b%2F2f%2Ff1%2Fnice.jpg&f=1" alt="">      
    </div>
    <div class="col">
      <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" alt="">
    </div>
    <div class="col">
      <img src="https://i.pinimg.com/originals/f4/a8/ac/f4a8ac1a2d768fdfbc73dd35f93a9292.jpg" alt="">
    </div>
 ...

SCSS

.container {
  display: flex;
  max-width: 100%;
  width: 692px;
  margin: 0 auto;
}

.container + .container {
  margin-top: 50px;
}

.col {
  flex: 1;
  text-align: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

.container.is-max-height {
  max-height: 100px;
}

.container.is-of {
  max-height: none;
  display: block;
  
  &:after {
    content: '';
    display: table;
    clear: both;
  }
  .col {
    float: left;
    width: 33%;
    height: 100px;
    overflow: hidden;
  }
  img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  &.is-of--bottom img {
    object-position: 50% 100%;
  }
}
.container.is-js.is-of .col {
  height: auto;
}

JavaScript

(() => {
	const images = Array.prototype.slice.call(document.querySelectorAll('.is-js img'));
  let min = Infinity;
	images.forEach(image => {
  	if (min > image.clientHeight) {
    	min = image.clientHeight;
    };
  })
  images.forEach(image => {
  	image.style.height = min + 'px';
  });
  Array.prototype.slice.call(
  	document.querySelectorAll('.is-js')
  ).forEach(container => container.style.visibility = 'visible');
})();