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 × 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:9 sin esta propiedad, deberás usar un hack de padding-top
y darle un padding de 56.25%
para establecer una relación de altura a ancho. Pronto tendremos una propiedad para evitar el hackeo y la necesidad de calcular el porcentaje. Puedes crear un cuadrado con una proporción de 1 / 1
, una proporción de 2 a 1 con 2 / 1
y cualquier cosa que necesites para que esta imagen se ajuste a una proporció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;
}