Cara menggunakan Kalkulator Aspect Ratio
- Masukkan rasio (atau klik rasio umum seperti 16:9 atau 9:16).
- Ketik lebar untuk mendapatkan tinggi yang sesuai, atau tinggi untuk mendapatkan lebarnya.
- Untuk mencari rasio gambar atau layar yang sudah ada, masukkan ukurannya di bawah Cari rasio dari sebuah ukuran; klik Gunakan rasio ini untuk mengubah ukuran dengan rasio tersebut.
- Salin CSS (
aspect-ratiobeserta fallback padding-top) dan pilih ukuran standar dari tabel.
Apa itu aspect ratio?
Aspect ratio adalah perbandingan proporsional antara lebar dan tinggi, ditulis sebagai lebar:tinggi. Video 1920 × 1080 dan video 1280 × 720 memiliki ukuran berbeda, tetapi sama-sama berrasio 16:9, sehingga keduanya bisa diskalakan satu sama lain tanpa diregangkan atau dipotong. Menjaga rasio saat mengubah ukuran adalah cara mencegah gambar terdistorsi dan munculnya black bar.
Rumus aspect ratio
- Tinggi baru = lebar baru × tinggi rasio ÷ lebar rasio — misalnya 1280 × 9 ÷ 16 = 720.
- Lebar baru = tinggi baru × lebar rasio ÷ tinggi rasio — misalnya 1080 × 16 ÷ 9 = 1920.
- Menyederhanakan ukuran: bagi kedua sisi dengan faktor persekutuan terbesar (FPB). 1920 dan 1080 memiliki FPB 120, sehingga menghasilkan 16:9.
Beberapa ukuran tidak bisa disederhanakan dengan rapi: 1366 × 768 (resolusi laptop yang umum) menjadi 683:384, yang mendekati 16:9. Kalkulator ini menampilkan rasio yang tepat beserta rasio umum terdekat.
Aspect ratio umum dan penggunaannya
| Rasio | Desimal | Penggunaan umum |
|---|---|---|
| 16:9 | 1.778 | Video HD/4K, YouTube, monitor, presentasi |
| 9:16 | 0.5625 | Story, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | TV dan monitor lama, iPad, banyak kamera compact |
| 3:2 | 1.5 | Film 35 mm, foto DSLR/mirrorless, laptop Surface |
| 1:1 | 1 | Postingan persegi di media sosial, avatar, thumbnail produk |
| 4:5 | 0.8 | Postingan feed potret di Instagram dan Facebook |
| 21:9 | ≈ 2.33 | Monitor ultrawide, video sinematik |
| 1.91:1 | 1.91 | Gambar Open Graph / pratinjau tautan (1200 × 630) |
Aspect ratio di CSS
Browser modern mendukung properti aspect-ratio: aspect-ratio: 16 / 9; pada elemen yang memiliki lebar akan memberinya tinggi yang sesuai. Cara ini ideal untuk embed video responsif, kartu, dan placeholder gambar yang mencegah pergeseran tata letak (bagus untuk Core Web Vitals CLS). Teknik lama yang digunakan adalah padding-top hack: wrapper dengan height: 0; padding-top: 56.25% (9 ÷ 16 × 100), karena persentase padding vertikal dihitung relatif terhadap lebar elemen. Keduanya sudah dibuat secara otomatis di atas. Untuk file gambar itu sendiri, gunakan Image Resizer; untuk pratinjau tautan, OG Image Generator membuat gambar 1200 × 630.
Juga dicari sebagai: aspect ratio, kalkulator rasio 16:9, kalkulator resolusi, rasio gambar, aspect ratio video, css aspect-ratio, padding-top hack, rasio 4:3.
Tool yang cocok dipakai bersama Kalkulator Aspect Ratio
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
- Konverter PX ke REM — Konversi antara pixel, rem, dan em dengan ukuran font root kamu sendiri, atau tempel seluruh stylesheet dan ubah semua nilai px sekaligus.
- Kalkulator Persen — Tujuh perhitungan persen sehari-hari dalam satu halaman.
- Kalkulator Selisih Waktu — Tambahkan kota yang ingin kamu pantau dan lihat selisih waktu dari zonamu, waktu lokal saat ini, serta apakah sedang siang atau malam.
Pertanyaan yang sering diajukan
Bagaimana cara menghitung tinggi dari lebar dan aspect ratio?
Apakah 1920×1080 itu 16:9?
Aspect ratio apa untuk 1080×1350?
Berapa nilai padding-top untuk 16:9?
Sebaiknya pakai aspect-ratio atau padding hack di CSS?
aspect-ratio; properti ini didukung semua browser terkini dan tidak memerlukan wrapper. Pertahankan padding hack hanya jika kamu harus mendukung browser yang sangat lama, seperti Safari sebelum versi 15.