Aspect Ratio

Kotak video 16:9, avatar bulat, dan petak galeri yang seragam punya satu kebutuhan bersama: proporsinya harus tetap meskipun lebar wadahnya berubah. Sebelum ada properti khusus, pola umumnya adalah jebakan padding-top — kotak dibuat tinggi lewat persentase padding yang memanfaatkan lebar — sebuah trik yang bekerja tetapi menyembunyikan maksudnya di balik angka yang tidak berkaitan dengan rasio. Properti aspect-ratio (Bagian dari Baseline; didukung seluruh browser utama sejak 2021) menyatakan rasio itu secara langsung: aspect-ratio: 16 / 9 berarti tinggi ideal kotak adalah lebar dibagi 16 kali 9. Chapter ini membahas cara menyatakannya, urutan prioritasnya terhadap dimensi eksplisit, dan kombinasinya dengan object-fit.

Menyatakan Rasio Sekali, Ukuran Mengikuti #

Cara paling lazim: tetapkan satu dimensi secara eksplisit, lalu serahkan dimensi satunya kepada rasio. Demo chapter ini memakai tiga kotak berikut:

.bingkai-video {
  width: 300px;
  aspect-ratio: 16 / 9;
  background-color: rgb(15, 23, 42);
}

.avatar {
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background-color: rgb(2, 132, 199);
}

.panel-vertikal {
  height: 120px;
  aspect-ratio: 4 / 5;
  background-color: rgb(220, 252, 231);
}

Mari kita telaah perhitungan yang dilakukan browser:

1. .bingkai-video: lebar 300px dengan rasio 16/9 menghasilkan tinggi 300 ÷ 16 × 9 = 168,75px. Browser menghitung dimensi yang tidak dinyatakan dari rasio.
2. .avatar: rasio 1/1 dengan lebar 96px menghasilkan kotak persegi 96px × 96px; border-radius: 9999px lalu membulatkannya menjadi lingkaran.
3. .panel-vertikal: rasio dapat menentukan lebar juga. Tinggi 120px dengan rasio 4/5 menghasilkan lebar 120 ÷ 5 × 4 = 96px — dimensi eksplisit boleh berada di sisi mana pun.

Prioritas terhadap Ukuran Eksplisit #

aspect-ratio bersifat memenuhi celah, bukan menimpa: rasio hanya dipakai untuk dimensi yang bernilai auto. Setelah kedua dimensi dinyatakan — misalnya width dan height keduanya diisi — kotak mengikuti kedua nilai itu dan rasio diabaikan. Dengan kata lain, rasio adalah preferensi untuk dimensi yang bebas, bukan kekuatan yang memaksa. Karena itu pola yang aman untuk responsif adalah menetapkan width: 100% tanpa height, sehingga tinggi selalu mengikuti rasio mengikuti lebar wadahnya.

Satu pengecualian penting menyangkut konten. Untuk kotak berisi teks yang tumbuh melampaui ruang rasio, browser membiarkan tinggi konten menang (tinggi minimum berbasis konten). Bila Anda ingin kotak tetap patuh pada rasio dan konten yang meluber dipangkas, tambahkan overflow: hidden — rasio kembali memegang kendali penuh atas dimensi kotak.

Kombinasi dengan object-fit #

Rasio menjadi paling berguna ketika dipadukan dengan object-fit yang kita bahas lebih dalam pada Chapter Object Fit dan Object Position . Pola “bingkai media” berikut menahan gambar apa pun — lanskap, potret, atau persegi — ke dalam bingkai 16:9 tanpa distorsi:

.bingkai {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.bingkai img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Gambar mengisi penuh bingkai (width dan height 100%), lalu object-fit: cover memangkas bagian yang meluber agar proporsi gambar tetap utuh. Bingkai inilah yang menjaga tata letak halaman tetap stabil: ruang untuk gambar telah tersedia sejak gambar mulai diunduh, sehingga layout tidak melompat saat gambar tiba.

Demo: Tiga Kotak, Tiga Rasio #

Demo chapter ini menata tiga kotak yang rasionya dihitung dari sisi berbeda:

<div class="bingkai-video" data-expected='{"height":"168.75px","width":"300px"}'>Bingkai 16:9</div>
<div class="avatar" data-expected='{"height":"96px"}'>B</div>
<div class="panel-vertikal" data-expected='{"width":"96px","height":"120px"}'>4:5</div>

Hasil di Browser:

Bingkai video selebar 300px dengan aspect-ratio 16/9 dihitung
tingginya 168.75px oleh browser — tanpa padding maupun height eksplisit.
Avatar 96px dengan rasio 1/1 menjadi persegi 96px tingginya.
Panel dengan tinggi 120px dan rasio 4/5 berlebar 96px.

Demo lengkap membawa atribut data-expected pada ketiga kotak — termasuk height: 168.75px pada bingkai video — memverifikasi hasil perhitungan rasio oleh browser secara otomatis. Nilai desimal seperti itu justru membuktikan browser benar-benar menghitung dari rasio, bukan membulatkannya.