Tarjeta de imagen de relación de aspecto

Con la propiedad aspect-ratio, a medida que cambias el tamaño de la tarjeta, el bloque visual verde mantiene esta relación de aspecto de 16 x 9. Respetamos la relación de aspecto con aspect-ratio: 16 / 9.

.video {
  aspect-ratio: 16 / 9;
}

Para mantener una relación de aspecto de 16 x 9 sin esta propiedad, tendrías que usar un truco de padding-top y darle un padding de 56.25% a fin de establecer una relación de la parte superior al ancho. Pronto tendremos una propiedad para esto para evitar el hackeo y la necesidad de calcular el porcentaje. Puedes hacer un cuadrado con una relación de aspecto de 1 / 1, una relación de 2 a 1 con 2 / 1 o cualquier cosa que necesites para que esta imagen escale con una relación de tamaño establecida.

.square {
  aspect-ratio: 1 / 1;
}

HTML

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}