JSFiddle - React, Tailwind, and code Playground

HTML

<div class="aspect-parent">
  <img src="http://placehold.it/50x350/E8117F/000000" class="aspect-fit" />
</div>
<div class="aspect-parent">
  <img src="http://placehold.it/350x50/E8117F/000000" class="aspect-fit" />
</div>
<div class="aspect-parent">
  <img src="http://placehold.it/150x50/E8117F/000000" class="aspect-fit" />
</div>
<div class="aspect-parent">
  <img src="http://placehold.it/50x150/E8117F/000000" class="aspect-fit" />
</div>

CSS

.aspect-parent {
  width:200px;
  height:200px;
  margin:10px;
  background-color:#fcfcfc;
  position:relative;
}
img.aspect-fit {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  height:100%;
  width:100%;
}