🔧Toolify365

Kalkulator Rasio Aspek (pertahankan rasio saat mengubah ukuran)

Atur rasio target dan satu dimensi; yang lainnya otomatis terisi. Arah sebaliknya bekerja dengan cara yang sama. Berguna untuk video, pemotongan foto, dan tata letak web responsif.

Rasio aspek
16:9
Desimal
1,7778
Dimensi
1920 × 1080

Alat terkait

Cara kerjanya

Apa itu rasio aspek

Rasio aspek menggambarkan lebar relatif terhadap tinggi: 16:9 berarti 16 unit lebar untuk setiap 9 unit tinggi. Rasio yang sama berlaku pada ukuran berapa pun — 1920×1080 dan 800×450 keduanya adalah 16:9. Mempertahankan rasio aspek saat mengubah ukuran mencegah gambar meregang atau menjadi gepeng dan merupakan dasar desain responsif.

Kami menerima bilangan bulat (16:9) atau desimal (1,78:1) untuk rasio, dan ukuran berapa pun untuk lebar/tinggi. Edit bidang mana pun — yang lainnya diperbarui untuk mempertahankan rasio. Rasio desimal (lebar / tinggi) ditampilkan untuk digunakan dalam ekspresi CSS calc() atau alat pengeditan video.

Rasio umum dan di mana digunakan

16:9 — TV HD modern, monitor komputer, YouTube, sebagian besar film sejak 2009. Default untuk hampir semua yang Anda lakukan saat ini.

9:16 — video vertikal untuk Instagram Stories, TikTok, YouTube Shorts. Sisi balik 16:9 untuk konten berbasis ponsel.

1:1 — persegi. Default feed Instagram hingga 2021. Sampul album, foto profil.

4:3 — TV lama dan monitor komputer sebelum HD. Masih digunakan untuk beberapa konten bergaya klasik.

3:2 — default kamera DSLR. Film 35mm. Cetakan lebih besar.

21:9 — sinematik ultrawide. Film yang direkam secara anamorfik. Beberapa monitor PC dan TV LG.

Mengapa CSS aspect-ratio penting

CSS modern memiliki aspect-ratio: 16/9; — atur rasio dan biarkan browser menghitung tinggi dari lebar (atau sebaliknya). Menghindari hack padding-bottom lama dan sangat penting untuk embed responsif dan placeholder gambar untuk mencegah pergeseran tata letak.

Cumulative Layout Shift (CLS) adalah Core Web Vital. Video yang disematkan, gambar tanpa dimensi, dan iklan semuanya dapat menyebabkan CLS — perbaiki dengan menetapkan lebar/tinggi eksplisit (yang digunakan browser untuk menghitung rasio aspek) atau menggunakan CSS aspect-ratio.

Pertanyaan umum

›Apa perbedaan antara 16:9 dan 1,78:1?

Rasio yang sama, notasi berbeda. 16/9 = 1,778. Bentuk titik dua konvensional dalam TV/web; bentuk desimal konvensional dalam sinema.

›Bagaimana cara mempertahankan rasio aspek di CSS?

Gunakan properti aspect-ratio: img { aspect-ratio: 16/9; width: 100%; height: auto; }. Gambar mengisi lebar container dan tinggi menyesuaikan untuk mempertahankan rasio.

›Mengapa video saya terlihat salah di TV 4:3?

Sebagian besar video modern adalah 16:9. Di layar 4:3, mereka letterbox (bilah hitam), pillar-box, atau meregang. Pengaturan TV mengontrol mana yang terjadi.

›Bisakah saya menggunakan rasio non-integer?

Ya — ketik 1,5 atau 2,39. Kalkulator memperlakukannya sebagai desimal; output rasio-sederhana hanya muncul untuk rasio integer.

›Apa itu 'rasio aspek piksel'?

Konsep yang berbeda: bentuk piksel individual. Tampilan modern menggunakan piksel persegi (1:1). Beberapa format video SD lama menggunakan piksel non-persegi (mis., 1,0667 untuk NTSC widescreen). Kalkulator ini menangani rasio aspek tampilan, bukan rasio aspek piksel.

›Apa tampilan 'sinematik'?

21:9 (lebih tepatnya 2,39:1 atau 2,40:1) — lebih lebar dari HDTV. Umum dalam film blockbuster modern. Layanan streaming sering menyajikan film dalam rasio ini.

›Mengapa Instagram Reel/TikTok menggunakan 9:16?

Karena ponsel biasanya dipegang secara vertikal. 9:16 mengisi seluruh layar ponsel dengan konten; 16:9 meninggalkan pita di atas dan bawah pada ponsel vertikal.

›Apakah data meninggalkan browser saya?

Tidak. Perhitungan berjalan secara lokal.

Layanan rekomendasi

Pemberitahuan

  • FXEA365 — Robot trading MT5 gratis

    Sponsored

    From the makers of this site: MT5 expert advisors with published multi-year backtests, hard stop-losses, and a free tier — no subscription.

    Browse free EAs →

  • NordVPN

    Sponsored

    Strict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.

    Get NordVPN →

  • Cloudways

    Sponsored

    Managed cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.

    Try Cloudways →

Komentar & pertanyaan