Kartu gambar rasio aspek

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