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;
}