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
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.
Alat terkait
Terakhir diperbarui: