Kalkulator Rasio Aspek

Cara menggunakan kalkulator rasio aspek

1. Pilih salah satu Rasio umum (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), atau ketik nilai Anda sendiri di Rasio atau ukuran asli. Anda bisa memasukkan rasio (16 dan 9) atau dimensi sebenarnya dari gambar, video, atau layar (1920 dan 1080).
2. Baca hasilnya: Rasio sederhana, Rasio desimal (lebar dibagi tinggi), Orientasi, dan Standar terdekat. Tanda “≈” berarti ukuran Anda mendekati standar tersebut, tetapi tidak persis sama.
3. Di bagian Ukuran baru (rasio tetap), ketik Lebar baru untuk mendapatkan tinggi yang sesuai, atau Tinggi baru untuk mendapatkan lebarnya. Baris di bawahnya menampilkan perhitungannya. Hapus centang Bulatkan ke piksel utuh jika Anda membutuhkan nilai yang persis, misalnya untuk ukuran cetak dalam milimeter.
4. Tukar lebar dan tinggi mengubah rasio lanskap menjadi potret (16:9 menjadi 9:16) dan sebaliknya.
5. Pratinjau menggambar kotak dengan rasio Anda, dan tabel menampilkan ukuran setiap rasio umum pada lebar baru Anda.
6. Salin Kode CSS dengan tombol Salin.

Cara kerja perhitungannya

Rasio aspek adalah lebar dibagi tinggi, ditulis sebagai dua bilangan bulat. Untuk menyederhanakannya, alat ini membagi kedua sisi dengan faktor persekutuan terbesar (FPB): FPB dari 1920 dan 1080 adalah 120, jadi 1920:1080 = 16:9. Input desimal lebih dulu dikalikan dengan pangkat sepuluh (2,39:1 menjadi 239:100).

Untuk mengubah ukuran sambil mempertahankan proporsi, rumusnya adalah perbandingan senilai:

• tinggi baru = lebar baru × tinggi asli ÷ lebar asli
• lebar baru = tinggi baru × lebar asli ÷ tinggi asli

Contoh: video 16:9 dengan lebar 1280 px memiliki tinggi 1280 × 9 ÷ 16 = 720 px.

Beberapa layar memiliki rasio yang “aneh”. Laptop 1366 × 768 disederhanakan menjadi 683:384, yaitu 1,779:1, hanya sedikit berbeda dari 16:9 (1,778:1), sehingga ditampilkan “≈ 16:9”. Monitor yang dijual sebagai 21:9 sebenarnya 64:27 (2560 × 1080) atau 43:18 (3440 × 1440), karena itu keduanya ada di tabel.

Properti CSS aspect-ratio

aspect-ratio: 16 / 9; meminta browser menghitung dimensi yang belum ditentukan: dengan width: 100%, tingginya mengikuti secara otomatis dan kotak menyesuaikan diri dengan wadahnya. Properti ini didukung semua browser modern (sejak 2021) dan cocok untuk embed video, kartu, placeholder gambar, dan thumbnail. Gabungkan dengan object-fit: cover pada gambar agar gambar dipotong, bukan direntangkan.

Kode yang dihasilkan juga menyertakan teknik lama padding-top sebagai cadangan: padding dalam persen dihitung dari lebar, jadi padding-top: 56.25% (9 ÷ 16) menyediakan area 16:9, dan konten diposisikan secara absolut di dalamnya. Teknik ini hanya diperlukan untuk browser yang sangat lama.

Menyediakan ruang dengan rasio juga mencegah pergeseran tata letak saat gambar dan video dimuat, sehingga skor Cumulative Layout Shift (CLS) menjadi lebih baik.