JSFiddle - React, Tailwind, and code Playground

by ktabarez

HTML

<div class="outerBox">
  <div class="wrapper">
      <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" alt="">
  </div>  
</div>

CSS

.outerBox {
  width: 100%; /* just set a width you like*/
}
/* make the ratio 4*3 (by 100% of width /75% of width). use any ratio you'd like to */
.wrapper { 
  width: 100%;/* % of width */
  padding-top: 25%; /* the % of padding will calculate by width */
  position:relative; /* as it childern's(img here) position's anchor */ 
  border: 2px solid black; /* just to illustrate margin */
}
img {
  /* make the image inside the padding space */
  position:absolute;
  top:0;
  bottom:0; 
  left:0; 
  right:0;
  /* make sure the image will not over the division */
  max-height:100%;
  max-width:100%;
  /* center the image */
  display:block; 
  margin: auto;
}