Aspect ratio de elementos de mídia

/* Proporções comuns */
.ratio-16-9  { aspect-ratio: 16 / 9; }
.ratio-4-3   { aspect-ratio: 4 / 3; }
.ratio-1-1   { aspect-ratio: 1; }
.ratio-3-4   { aspect-ratio: 3 / 4; } /* portrait */
.ratio-21-9  { aspect-ratio: 21 / 9; } /* ultrawide */

/* Imagem que cobre o container */
.cover-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}