JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed-height">
  <p>
  fixed height (120px)
  </p>
  <img src="http://s3.birthmoviesdeath.com/images/made/Batgirl-Arkham-Knight-Header_1050_591_81_s_c1.jpg" />
  <img src="https://comicvine.gamespot.com/api/image/scale_medium/4233137-jl0102-03jasdkhflaksud7ffk-1.jpg" />
  <img src="https://static.comicvine.com/uploads/scale_small/8/82665/1886848-nightwing.png" />
</div>

<div id="background-cover">
  <p>
  background-size: cover;
  </p>
  <div class="image-frame" style="background-image:url(http://s3.birthmoviesdeath.com/images/made/Batgirl-Arkham-Knight-Header_1050_591_81_s_c1.jpg)"></div>
  <div class="image-frame" style="background-image:url(https://comicvine.gamespot.com/api/image/scale_medium/4233137-jl0102-03jasdkhflaksud7ffk-1.jpg)"></div>
  <div class="image-frame" style="background-image:url(http://www.dccomics.com/sites/default/files/NTW_Cv9_58098929533e38.42339267.jpg)"></div>
 
</div>

CSS

#fixed-height {
  border:solid 3px gold;
}
#fixed-height img {
  width:auto;
  height:150px;
}

/* second div: background-size:cover */
#background-cover {
  height:200px;
}

.image-frame {
  display:inline-block;
  width:200px;
  height:200px;
  border:solid 1px dodgerblue;
  background-position:center;
  background-size:cover;
}