Con la proprietà aspect-ratio
, quando redimensioni la scheda, il blocco visivo verde mantiene queste proporzioni di 16 x 9. Rispettiamo le proporzioni con aspect-ratio: 16 / 9
.
.video {
aspect-ratio: 16 / 9;
}
Per mantenere le proporzioni 16 x 9 senza questa proprietà, devi utilizzare un hack padding-top
e aggiungere un padding di 56.25%
per impostare un rapporto altezza/larghezza. A breve avremo una proprietà per evitare l'hack e la necessità di calcolare la percentuale. Puoi creare un'immagine quadrata con proporzioni 1 / 1
, proporzioni 2:1 con 2 / 1
e qualsiasi altra immagine che ti serve per ridimensionare l'immagine con un rapporto di dimensioni impostato.
.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;
}