Aspect ratio adalah perbandingan lebar dan tinggi, misalnya 16:9 buat video YouTube atau 1:1 buat persegi. Properti aspect-ratio mengunci perbandingan itu: kamu cukup kasih lebarnya, browser yang menghitung tingginya. Kalau lebarnya berubah, tingginya ikut berubah dan bentuknya tetap sama.
🧪 Tebakan cepat: kalau
widthdanheightdua-duanya ditulis,aspect-ratiomasih dipakai gak? Tebak dulu, jawabannya ada di bagian "Kalauheightjuga ditulis".
Kunci rasio dengan aspect-ratio
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
width: 100%bikin lebarnya penuh.aspect-ratio: 16 / 9artinya tiap 16 bagian lebar, tingginya 9 bagian. Angka kiri buat lebar, angka kanan buat tinggi, dipisah garis miring/.heightsengaja gak ditulis, karena browser yang menghitungnya.
Hasilnya, kalau lebarnya 400px, tingginya 400 × 9 ÷ 16 = 225px. Kalau layarnya menyempit dan lebarnya jadi 320px, tingginya ikut jadi 180px. Bentuknya selalu persegi panjang melebar, kayak layar video.
Rumusnya: tinggi = lebar × angka kanan ÷ angka kiri.
Rasio yang sering dipakai
16 / 9: video widescreen, kayak YouTube.4 / 3: foto klasik.1 / 1: persegi, buat avatar atau thumbnail.21 / 9: layar ultrawide.
Spasi di sekitar / boleh ada boleh gak: 16/9 sama dengan 16 / 9.
Avatar bulat dibikin dari persegi yang sudutnya dibulatkan:
.avatar {
width: 100px;
aspect-ratio: 1 / 1;
border-radius: 50%;
}
aspect-ratio: 1 / 1 bikin tingginya sama dengan lebarnya, jadi persegi 100px × 100px. border-radius: 50% membulatkan sudutnya sampai jadi lingkaran. Tanpa rasio, <div> kosong tingginya 0 dan gak kelihatan sama sekali.
Kalau height juga ditulis
aspect-ratio cuma menghitung ukuran yang belum ditentukan. Kalau width dan height dua-duanya sudah ditulis, gak ada yang tersisa buat dihitung, jadi height yang dipakai dan rasionya diabaikan. Jawaban tebakan: gak dipakai. Tulis salah satunya aja, biasanya width.
⚠️ Jebakan yang sering ketemu
- Pakai titik dua.
aspect-ratio: 16:9gak valid. Pemisahnya garis miring:16 / 9. - Isi yang gak muat. Kalau teks di dalam kotak lebih tinggi dari hasil rasionya, kotaknya ikut memanjang biar isinya muat, jadi rasionya gak pas lagi.
- Gambar yang dipaksa rasio lain.
<img>dengan rasio yang beda dari fotonya jadi gepeng. Tambahkanobject-fit: coversupaya fotonya dipotong, bukan ditekan.
TL;DR: aspect-ratio: 16 / 9 mengunci perbandingan lebar dan tinggi. Kasih width, browser menghitung tingginya: lebar 400px jadi tinggi 225px. 1 / 1 bikin persegi, dan dengan border-radius: 50% jadi lingkaran. Kalau width dan height dua-duanya ditulis, height menang dan rasionya diabaikan.
