Cara menggunakan
- Untuk mengubah ukuran, masukkan rasio (misalnya 16 dan 9) atau pilih rasio umum, lalu masukkan lebar atau tinggi. Sisi lainnya akan dihitung.
- Untuk mengetahui rasio, masukkan lebar dan tinggi gambar, layar, atau video.
- Periksa pratinjau, lalu salin aturan CSS aspect-ratio jika diperlukan untuk tata letak web.
Cara kerja
Pengubahan ukuran proporsional menggunakan rumus tinggi = lebar × tinggi rasio ÷ lebar rasio (dan sebaliknya). Ukuran dalam piksel biasanya berupa bilangan bulat, jadi hasilnya dapat dibulatkan; jika rasio tidak dapat dibagi rata, seperti 16:9 pada lebar 1000, tinggi hasil pembulatan (563) merupakan perkiraan yang mendekati, bukan ukuran yang benar-benar cocok.
Ukuran disederhanakan dengan membagi kedua sisi menggunakan faktor persekutuan terbesar: 1920 dan 1080 sama-sama habis dibagi 120, sehingga menjadi 16:9. Beberapa ukuran sebenarnya tidak dapat disederhanakan menjadi rasio yang umum. 1366×768 tepatnya adalah 683:384, yang sangat mendekati 16:9, jadi alat ini juga menampilkan rasio umum terdekat jika selisihnya kurang dari 2 %. Demikian pula, monitor “21:9” sebenarnya memiliki rasio 64:27 (2560×1080) atau 43:18 (3440×1440); 21:9 adalah nama pemasaran.
Di CSS, aspect-ratio: 16 / 9 membuat elemen mempertahankan bentuk tersebut saat lebarnya berubah. Ini berguna untuk sematan video dan placeholder gambar yang tidak boleh menggeser tata letak saat dimuat.
Contoh
Ukuran thumbnail video
Thumbnail 16:9 yang harus memiliki lebar 1280 piksel perlu memiliki tinggi 720 piksel.
Menentukan rasio layar
2560×1600 disederhanakan menjadi 8:5, sama dengan 16:10, rasio yang umum pada laptop.
Potongan potret untuk media sosial
Dengan rasio 4:5 dan lebar 1080, tingginya adalah 1350, ukuran potret yang diterima banyak feed.
Pertanyaan yang sering diajukan
Apakah 16:9 sama dengan 1,78:1?
Ya. 16 ÷ 9 ≈ 1,778, jadi keduanya menggambarkan bentuk yang sama. Format sinema sering ditulis dalam bentuk desimal, seperti 2,39:1.
Mengapa hasilnya memiliki angka desimal?
Tidak semua lebar bisa dibagi rata berdasarkan rasio. Aktifkan pembulatan untuk ukuran piksel. Hasilnya akan dibulatkan ke piksel utuh terdekat, sehingga rasionya mungkin sedikit berbeda dari rasio yang tepat.
Apakah properti CSS aspect-ratio berfungsi di semua browser?
Properti ini didukung oleh semua browser utama versi terbaru. Jika lebar dan tinggi suatu elemen juga ditetapkan secara eksplisit, nilai tersebut akan lebih diutamakan daripada aspect-ratio.
Privasi
Semua perhitungan dilakukan di browser Anda. Tidak ada data yang dikirim atau disimpan.