JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<figure class="f1">
  <img src="https://images.unsplash.com/photo-1415369629372-26f2fe60c467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
</figure>

<figure class="f2">
  <img src="https://images.unsplash.com/photo-1415369629372-26f2fe60c467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
</figure>

<figure class="f3">
  <img src="https://images.unsplash.com/photo-1415369629372-26f2fe60c467?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
</figure>

CSS

body {
  margin: 1rem auto 0;
  width: 50%;
}

figure {
  position: relative;
  margin: 0 0 1rem;
  background-color: red;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f1 {
  padding-top: 56.25%;
  /* 1080 / 1920 * 100 + '%' */
  /* или 16:9 т.е. 9 / 16 * 100 + '%' */
}

.f2 {
  padding-top: 75%;
  /* 480 / 640 * 100 + '%' */
  /* или 4:3 т.е. 3 / 4 * 100 + '%' */
}

.f3 {
  padding-top: 100%;
  /* 1:1 т.е. 1 / 1 * 100 + '%' */
}