Dengan properti aspect-ratio
, saat Anda mengubah ukuran kartu, blok visual hijau akan mempertahankan rasio aspek 16 x 9 ini. Kami mengikuti rasio aspek dengan aspect-ratio: 16 / 9
.
.video {
aspect-ratio: 16 / 9;
}
Untuk mempertahankan rasio aspek 16x9 tanpa properti ini, Anda harus menggunakan padding-top
peretasan dan memberinya padding sebesar 56.25%
untuk menetapkan rasio dari atas ke lebar. Kami akan segera memiliki properti untuk ini guna menghindari peretasan dan keharusan menghitung persentase. Anda dapat membuat persegi dengan rasio 1 / 1
, rasio 2 banding 1 dengan 2 / 1
, dan apa saja yang Anda perlukan agar gambar ini diskalakan dengan rasio ukuran yang ditetapkan.
.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;
}