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;
}
<div class="parent">
 
<div class="card">
   
<h1>Video Title</h1>
   
<div class="visual"></div>
   
<p>Descriptive Text goes here</p>
 
</div>
</div>

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

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

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