JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="https://placeimg.com/640/480/any" alt="">
</div>

<div>
  <img src="https://placeimg.com/400/200/any" alt="">
</div>

<div>
  <img src="https://placeimg.com/480/1000/any" alt="">
</div>

<div>
  <img src="https://placeimg.com/280/1000/any" alt="">
</div>

<div>
  <img src="https://placeimg.com/400/400/any" alt="">
</div>

CSS

div {
  /* Блок обертки картинки */
  width: 20%;
  /* Тут ширина ваша, высота будет считаться на хаке ниже */
  position: relative;
  /* Это обязательно */

  /* Временные стили*/
  background-color: #eee;
  margin: 30px auto;

}

div:before {
  /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */
  content: "";
  display: block;
  padding-bottom: 100%;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  display: inline-block;
  width: auto;
  min-width: 1px;
  max-width: 100%;
  height: initial;
  min-height: 1px;
  max-height: 100%;
}