Kalkulator Aspect Ratio

Kalkulator aspect ratio untuk gambar dan video — hitung lebar atau tinggi sambil mempertahankan rasio, tentukan rasio gambar apa pun, dapatkan kode CSS siap pakai, dan periksa bilah letterbox. Gratis, tanpa registrasi.

:

Umum

Media sosial

Cetak dan kertas

Sinema dan video

1920 × 1080
Rasio dimensi: 16:9

Lebar (px)

1920

Tinggi (px)

1080

Megapiksel

2.07

Kode siap pakai

CSS aspect-ratio:
aspect-ratio: 16 / 9;
HTML <img> (anti-CLS):
<img src="..." width="1920" height="1080" alt="">
CSS iframe responsif:
.embed { position: relative; width: 100%; padding-bottom: 56.25%; } .embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

Unduh panduan PNG

Menghasilkan gambar PNG dalam rasio yang dipilih, bersih dan tanpa tanda. Berguna sebagai templat pembingkaian atau dasar desain. Sisi terpanjang adalah 2048px.

Tentang alat ini

Kalkulator aspect ratio online gratis untuk siapa saja yang bekerja dengan video, desain, dan pengembangan web. Alat ini menyelesaikan proporsi antara rasio (16:9, 4:3, 1:1, 21:9, dan lusinan lainnya) dengan kolom lebar dan tinggi: masukkan satu dimensi dan dimensi lainnya dihitung secara instan dengan mempertahankan rasio gambar. Anda juga dapat menentukan rasio resolusi apa pun yang sudah ada — cukup masukkan lebar dan tinggi, dan alat akan otomatis mereduksi ke bentuk minimal. Selain perhitungan, alat ini menghasilkan kode CSS siap tempel, menampilkan pratinjau waktu nyata, dan menghitung bilah letterbox untuk mengetahui berapa banyak bilah hitam yang tersisa saat konten disesuaikan dalam kontainer dengan rasio berbeda. Semua berjalan di browser, tanpa registrasi.

Fitur

Menghitung lebar atau tinggi sambil mempertahankan rasio
Lusinan preset berdasarkan konteks: media sosial, sinema, dan cetak
Menghasilkan kode CSS aspect-ratio, atribut gambar anti-CLS, dan iframe responsif
Perhitungan letterbox dan pillarbox untuk penyesuaian dalam kontainer
Unduh panduan PNG dalam rasio tepat dan pratinjau waktu nyata

Cara kerja perhitungan aspect ratio

Aspect ratio adalah hubungan antara lebar dan tinggi, ditulis sebagai dua angka yang dipisahkan oleh titik dua. Dalam 16:9, misalnya, untuk setiap 16 unit lebar ada 9 unit tinggi. Perhitungannya adalah proporsi sederhana: tinggi diperoleh dari lebar × (9 ÷ 16) dan lebar dari tinggi × (16 ÷ 9). Untuk menentukan rasio gambar apa pun, lebar dan tinggi dibagi dengan pembagi persekutuan terbesar keduanya, yang mereduksi, misalnya, 1920×1080 ke bentuk minimal 16:9. Inilah prinsip yang sama yang diterapkan kalkulator untuk menjaga setiap perubahan ukuran bebas dari distorsi.

Kasus Penggunaan

Penggunaan paling umum kalkulator aspect ratio dalam rutinitas harian mereka yang memproduksi konten visual dan kode adalah:

  • Pengeditan dan ekspor videoMengonversi master 4K ke HD, mengonfigurasi resolusi output, dan menemukan tinggi yang tepat untuk pemotongan widescreen tanpa mendistorsi gambar.
  • Banner dan tata letak responsifMenentukan tinggi banner dari lebar tetap dan menghasilkan CSS aspect-ratio yang mempertahankan proporsi di layar apa pun.
  • Konten media sosialMendapatkan Story 9:16 (1080×1920px), feed Instagram 4:5 (1080×1350px), dan thumbnail YouTube 16:9 (1280×720px) sebelum mengekspor, menghindari pemotongan yang tidak diinginkan saat publikasi.
  • Video tertanam responsifMenghasilkan pola iframe dengan padding proporsional untuk menyematkan pemutar video yang beradaptasi dengan lebar kontainer.
  • Performa dan Core Web VitalsMengisi atribut width dan height gambar untuk memesan ruang tata letak dan mengurangi pergeseran tata letak kumulatif (CLS).
  • Cetak dan tata letakMenghitung dimensi proporsional untuk A4, foto, dan materi cetak dari ukuran yang diketahui.

Cara Menggunakan

1

Pilih rasio

Ketik dua angka rasio atau klik salah satu preset yang diorganisir berdasarkan konteks. Pratinjau dan kode diperbarui secara instan.

2

Masukkan satu dimensi

Isi lebar atau tinggi. Kolom yang berlawanan dihitung otomatis dengan mempertahankan rasio yang dipilih.

3

Salin kode

Gunakan tombol salin untuk memindahkan CSS aspect-ratio, atribut gambar, atau iframe responsif langsung ke proyek Anda.

4

Periksa letterbox (opsional)

Aktifkan perhitungan bilah, masukkan ukuran kontainer, dan lihat berapa banyak bilah hitam yang tersisa saat konten disesuaikan.

Pertanyaan Umum

Apa arti aspect ratio?

Aspect ratio adalah hubungan antara lebar dan tinggi gambar, video, atau layar. Ditulis sebagai dua angka yang dipisahkan oleh titik dua, seperti 16:9 atau 4:3. Angka pertama mewakili lebar proporsional dan yang kedua tinggi. Rasio 16:9 tidak menunjukkan ukuran piksel sebenarnya, hanya bahwa lebar selalu 16/9 kali tinggi, baik dalam video 1280×720 maupun 3840×2160.

Bagaimana menghitung tinggi dari lebar sambil mempertahankan rasio?

Cukup kalikan lebar dengan tinggi rasio dan bagi dengan lebar rasio. Untuk lebar 1200px dalam 16:9, perhitungannya adalah 1200 × 9 ÷ 16, yang menghasilkan tinggi 675px. Kalkulator melakukan ini secara otomatis: pilih rasio, masukkan lebar, dan tinggi sudah terhitung. Jalur sebaliknya, menemukan lebar dari tinggi, mengikuti logika yang sama dengan menukar suku-sukunya.

Apa perbedaan antara 16:9, 4:3, dan 21:9?

Keduanya adalah rasio dengan format berbeda. 4:3 hampir persegi, standar TV dan monitor lama. 16:9 adalah widescreen saat ini, digunakan di hampir semua video online, TV, dan ponsel dalam mode lanskap. 21:9 adalah ultrawide, lebih memanjang, umum pada monitor produktivitas dan film dengan nuansa sinematik. Semakin besar perbedaan antara dua angka, semakin memanjang dan panoramik gambarnya.

Apa itu letterbox dan pillarbox?

Keduanya adalah bilah hitam yang muncul ketika konten ditampilkan dalam ruang dengan rasio berbeda, tanpa memotong apa pun. Letterbox adalah bilah horizontal di atas dan bawah, umum saat menonton film widescreen di layar yang lebih persegi. Pillarbox adalah bilah vertikal di sisi kiri dan kanan, yang muncul saat menampilkan video yang lebih persegi di layar widescreen. Kalkulator memberi tahu Anda persis berapa piksel bilah yang tersisa di setiap kasus.

Bagaimana cara menggunakan aspect-ratio dalam CSS?

Properti CSS aspect-ratio memesan ruang elemen dalam rasio yang diinginkan tanpa harus menetapkan tinggi. Untuk blok 16:9, cukup tulis aspect-ratio: 16 / 9 dan browser menghitung tinggi dari lebar yang tersedia. Ini adalah cara modern untuk mempertahankan proporsi responsif dan menggantikan trik padding-bottom persentase yang lama. Kalkulator menghasilkan baris ini dengan nilai rasio yang dipilih.

Bacaan yang Disarankan:Rasio aspek (gambar)

Lihat juga