Pernah lihat thumbnail YouTube yang persis 16:9 walau dipasang di lebar berbeda-beda? Atau avatar profil yang selalu lingkaran sempurna walau ukuran beda? Rahasianya: aspect ratio. Dulu, bikin elemen yang rasionya tetep itu butuh padding-top hack ribet (padding-top: 56.25% untuk 16:9 — tau dari mana angkanya?). Sekarang? Tinggal aspect-ratio: 16 / 9 — readable, langsung ngerti, gak perlu wrapper tambahan.

💡 Resolusi vs Aspect Ratio. Aspect ratio = perbandingan lebar:tinggi (16:9, 4:3, 1:1). Resolusi = pixel real (1920×1080). Aspect ratio fixed walau resolusi beda — itu kenapa video YouTube tetep proporsional di HP atau bioskop IMAX.

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; /* rasio layar widescreen */
}

.avatar {
  width: 100px;
  aspect-ratio: 1 / 1; /* selalu persegi */
}

Rasio umum:

• 16 / 9 — video widescreen, YouTube
• 4 / 3 — foto klasik
• 1 / 1 — persegi, avatar, thumbnail
• 21 / 9 — ultrawide

Modern browser (Chrome 88+, Firefox 89+, Safari 15+) udah aman pakai aspect-ratio langsung — gak perlu lagi padding-top hack.

🎭 Analogi sehari-hari

aspect-ratio = bingkai foto otomatis sesuai rasio. Kasih lebar 100%, tinggi otomatis 56.25% (16:9). Tidak perlu hitung pixel manual atau pakai padding hack lama.

⚠️ Jebakan yang sering ditemui

• Padding-top hack lama (padding-top: 56.25%) butuh wrapper + child absolute — ribet. aspect-ratio simple satu line.
• Conflict dengan height — kalau set kedua, height menang. Pakai cuma satu.
• aspect-ratio butuh DIMENSI lainnya definite (width atau height) untuk bekerja.
• min-height override aspect ratio — ratio cuma "preferred", masih bisa grow.
• Gambar dengan natural ratio + aspect-ratio CSS — image tetap distorsi kalau aspect-ratio CSS beda. Pakai object-fit untuk crop.
• Browser support modern (Chrome 88+, Firefox 89+, Safari 15+). 2026 = aman.

TL;DR: aspect-ratio: 16/9 ngunci rasio elemen — gantiin padding-top hack lama (56.25%). Cocok buat thumbnail video (16:9), avatar lingkaran (1:1), card konsisten. Butuh dimensi lain (width atau height) definite buat works. Conflict dengan height set: height menang. Gambar natural ratio beda dari aspect-ratio CSS = distorsi — pakai object-fit: cover/contain. Browser support modern (2022+) udah aman.