Cara menggunakannya
- Untuk mengubah saiz, masukkan nisbah (contohnya 16 dan 9) atau pilih nisbah biasa, kemudian taip lebar atau tinggi. Nilai sebelah lagi akan dikira.
- Untuk mencari nisbah, masukkan lebar dan tinggi imej, skrin atau video.
- Semak pratonton dan salin peraturan aspect-ratio CSS jika anda perlukannya untuk susun atur web.
Cara ia berfungsi
Pengubahan saiz berkadar menggunakan tinggi = lebar × tinggi nisbah ÷ lebar nisbah (dan sebaliknya). Saiz piksel biasanya nombor bulat, jadi hasilnya boleh dibundarkan; apabila nisbah tidak membahagi tepat, seperti 16:9 pada lebar 1000, tinggi yang dibundarkan (563) ialah anggaran hampir, bukan padanan tepat.
Sesuatu saiz dipermudahkan dengan membahagikan kedua-dua belah dengan faktor sepunya terbesar: 1920 dan 1080 berkongsi 120, memberikan 16:9. Sesetengah saiz sebenar tidak menjadi nisbah yang biasa apabila dipermudahkan. 1366×768 ialah tepat 683:384, yang sangat hampir dengan 16:9, jadi alat ini juga menunjukkan nisbah biasa terdekat apabila perbezaannya dalam 2%. Begitu juga, monitor “21:9” sebenarnya 64:27 (2560×1080) atau 43:18 (3440×1440); 21:9 ialah nama pemasaran.
Dalam CSS, aspect-ratio: 16 / 9 menjadikan elemen mengekalkan bentuk itu apabila lebarnya berubah, yang berguna untuk benam video dan pemegang tempat imej yang tidak sepatutnya mengalihkan reka letak semasa dimuatkan.
Contoh
Saiz imej kecil video
Imej kecil 16:9 yang mesti 1280 piksel lebar perlu 720 piksel tinggi.
Mengenal pasti nisbah skrin
2560×1600 dipermudahkan kepada 8:5, iaitu sama dengan 16:10, yang lazim pada komputer riba.
Potongan potret untuk media sosial
Dengan nisbah 4:5 dan lebar 1080, tingginya ialah 1350, saiz potret yang diterima oleh banyak suapan.
Soalan Lazim
Adakah 16:9 sama dengan 1.78:1?
Ya. 16 ÷ 9 ≈ 1.778, jadi kedua-duanya menggambarkan bentuk yang sama. Format pawagam selalunya diberikan sebagai perpuluhan, seperti 2.39:1.
Mengapa hasil saya mempunyai perpuluhan?
Tidak setiap lebar boleh dibahagi tepat dengan nisbah. Hidupkan pembundaran untuk saiz piksel; hasilnya kemudian ialah piksel bulat terdekat, yang mungkin berbeza sebahagian kecil piksel daripada nisbah tepat.
Adakah sifat aspect-ratio CSS berfungsi di semua tempat?
Ia disokong dalam semua pelayar utama semasa. Jika elemen juga mempunyai lebar dan tinggi yang ditetapkan secara eksplisit, nilai tersebut mengambil keutamaan berbanding aspect-ratio.
Privasi
Semua pengiraan dijalankan dalam pelayar anda. Tiada apa-apa dihantar atau disimpan.