JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="container"><img src="https://placeimg.com/100/100/any"></div>

CSS

.container{
  width: 100%;
  text-align: center;
  height: 300px; 
  border: solid 1px red;
}
.container img{
  width: 100%;
  height: 100%;
  max-width: 100%; 
  max-height: 100%;
  object-fit: scale-down;
  vertical-align: middle;
}