Semua resep pada section ini bertumpu pada satu prasyarat: kotak media harus punya bentuk yang jelas sejak awal — sebelum gambar selesai dimuat, sebelum data dari server tiba, bahkan sebelum elemen dirender. Property aspect-ratio, resmi dan didukung seluruh browser modern sejak 2021, membuat kita bisa menuliskan bentuk itu langsung di CSS sebagai perbandingan dua angka, lalu membiarkan browser menghitung sisa dimensinya. Chapter ini membahas sintaksnya, perilakunya pada kotak biasa dan pada elemen gambar, serta kombinasi terpentingnya dengan object-fit: cover.

Sintaks: Satu Rasio, Dua Dimensi #

aspect-ratio menerima perbandingan lebar terhadap tinggi:

css 
.bingkai-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Bandingkan tiga rasio pada lebar kolom yang sama — tingginya masing-masing dihitung browser:

Tingginya memang dihitung, bukan ditulis: di lebar 480px, rasio 16/9 menghasilkan tinggi 270px tanpa satu angka tinggi pun di CSS. Tiga aturan pemakaiannya:

  • Cukup satu dimensi. Bila width sudah diketahui, height dihitung dari rasio; bila height yang diketahui, width yang dihitung. Property ini hanya mengisi dimensi yang masih auto.
  • Dua dimensi eksplisit mengalahkan rasio. Begitu width dan height sama-sama ditulis, aspect-ratio tidak punya peran — bentuk kotak sudah dikunci.
  • Formatnya fleksibel. 16 / 9, 16/9, dan desimal seperti 1.5 semuanya valid; menulis dengan spasi hanya agar mudah dibaca.

Beberapa rasio yang paling sering dipakai di antarmuka: 16 / 9 untuk video dan embed, 4 / 3 untuk media kartu katalog, 1 / 1 untuk avatar dan thumbnail persegi, serta 3 / 4 untuk foto potret pada daftar kontak atau profil. Menyimpan perbandingan ini sebagai bekalan jauh lebih berguna daripada menghafal piksel, karena rasio tetap benar pada ukuran kotak mana pun.

Pada Kotak dan pada Elemen Gambar #

Perilaku aspect-ratio sedikit berbeda di dua dunia. Pada kotak biasa (div, section, kartu), property ini membentuk wadah dari nol: beri satu dimensi, dan kotak langsung punya bentuk — bahkan saat masih kosong. Inilah fondasi anti-layout-shift untuk semua jenis konten yang dimuat belakangan. Enam ubin berikut dibentuk murni oleh aspect-ratio: 4 / 3 — tingginya tidak pernah ditulis, selalu dihitung dari lebar kolomnya:

Perkecil dan perbesar jendela demo: jumlah kolom menyesuaikan lebar dan setiap ubin tetap berbentuk 4:3 — inilah yang membuat area media kartu seragam meski gambarnya belum termuat.

Pada replaced element seperti img, nilai default-nya adalah aspect-ratio: auto: browser memakai rasio intrinsik berkas — persis mekanisme yang dibedah di chapter Width, Height, dan Intrinsic Ratio, kini bersumber dari CSS, bukan hanya dari atribut HTML. Menulis rasio eksplisit menggantikan rasio intrinsik itu:

css 
.gambar-potong {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Gambar lanskap maupun potret sama-sama mendarat rapi dalam kotak persegi yang sama:

Kombinasi Andalan: aspect-ratio + object-fit: cover #

Dua property yang kita bahas di section ini dirancang untuk bekerja berpasangan:

css 
.kartu-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

Masing-masing mengambil satu peran: aspect-ratio menjamin semua area media berbentuk sama — 4:3 apa pun isi katalognya — sedangkan object-fit: cover mengisi bentuk itu tanpa distorsi dan object-position (chapter sebelumnya) mengatur arah potongannya. Tambahkan atribut width/height pada HTML untuk cadangan rasio, dan area media menjadi stabil di tiga lapisan sekaligus: sebelum CSS termuat, sebelum gambar tiba, dan setelah keduanya aktif.

Ringkasan #

aspect-ratio menuangkan bentuk kotak sebagai perbandingan dua angka: cukup satu dimensi diketahui, sisanya dihitung browser. Pada kotak biasa property ini membentuk wadah sebelum konten datang; pada gambar ia bersaing dengan rasio intrinsik dan baru berbicara bila ditulis eksplisit. Dipadukan dengan object-fit: cover, dua property ini menjadi pasangan baku untuk area media yang seragam. Semua bahannya kini lengkap — chapter berikutnya merakitnya menjadi komponen yang paling sering kita bangun di dunia nyata: kartu.