Kraštinių santykio skaičiuoklė
Kraštinių santykio skaičiuoklė: supaprastink plotį ir aukštį, keisk dydį išlaikant proporcijas, palygink 16:9, 4:3, 21:9 ir gauk CSS aspect-ratio kodą.
Dažni santykiai
- Supaprastintas santykis
- –
- Dešimtainis santykis
- –
- Orientacija
- –
- Artimiausias standartas
- –
Peržiūra
Dažni santykiai
| Santykis | Dešimtainis | Dydis | Tipinis naudojimas |
|---|
Kaip naudotis kraštinių santykio skaičiuokle
- Pasirink vieną iš Dažni santykiai (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) arba įvesk savo reikšmes laukelyje Santykis arba pradinis dydis. Gali įvesti santykį (16 ir 9) arba tikrus vaizdo, vaizdo įrašo ar ekrano matmenis (1920 ir 1080).
- Perskaityk rezultatus: Supaprastintas santykis, Dešimtainis santykis (plotis, padalytas iš aukščio), Orientacija ir Artimiausias standartas. Ženklas „≈“ reiškia, kad tavo dydis artimas tam standartui, bet nėra visiškai toks pat.
- Skiltyje Naujas dydis (išlaiko santykį) įvesk Naujas plotis, kad gautum atitinkamą aukštį, arba Naujas aukštis, kad gautum plotį. Eilutė žemiau parodo skaičiavimą. Nuimk žymę nuo Apvalinti iki sveikų pikselių, jei reikia tikslios reikšmės, pavyzdžiui, spaudos dydžiams milimetrais.
- Sukeisti plotį ir aukštį paverčia gulsčią santykį stačiu (16:9 tampa 9:16) ir atvirkščiai.
- Peržiūra nupiešia stačiakampį su tavo santykiu, o lentelėje matyti kiekvieno dažno santykio dydis esant tavo naujam pločiui.
- Mygtuku Kopijuoti nukopijuok CSS kodas.
Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.
Kaip veikia skaičiavimas
Kraštinių santykis yra plotis, padalytas iš aukščio, užrašytas dviem sveikaisiais skaičiais. Norint jį supaprastinti, įrankis abi puses padalija iš didžiausio bendrojo daliklio (DBD): 1920 ir 1080 DBD yra 120, todėl 1920:1080 = 16:9. Dešimtainiai skaičiai pirmiausia padauginami iš dešimties laipsnio (2,39:1 tampa 239:100).
Dydžiui pakeisti taikoma trijų narių taisyklė:
- naujas aukštis = naujas plotis × pradinis aukštis ÷ pradinis plotis
- naujas plotis = naujas aukštis × pradinis plotis ÷ pradinis aukštis
Pavyzdys: 16:9 vaizdo įrašo, kurio plotis 1280 px, aukštis yra 1280 × 9 ÷ 16 = 720 px.
Kai kurie ekranai turi „keistus“ santykius. 1366 × 768 nešiojamojo kompiuterio santykis supaprastinamas iki 683:384, tai yra 1,779:1, vos kiek nutolęs nuo 16:9 (1,778:1), todėl rodoma „≈ 16:9“. Monitoriai, parduodami kaip 21:9, iš tikrųjų yra 64:27 (2560 × 1080) arba 43:18 (3440 × 1440), todėl abu santykiai yra lentelėje.
CSS savybė aspect-ratio
aspect-ratio: 16 / 9; nurodo naršyklei apskaičiuoti trūkstamą matmenį: kai nustatyta width: 100%, aukštis pasikeičia automatiškai, o blokas keičia dydį kartu su savo konteineriu. Savybė veikia visose dabartinėse naršyklėse (nuo 2021 m.) ir puikiai tinka vaizdo įrašų įterpiniams, kortelėms, vaizdų vietos žymekliams ir miniatiūroms. Su paveikslėliais derink ją su object-fit: cover, kad vaizdas būtų apkarpomas, o ne ištempiamas.
Kode taip pat yra senesnis padding-top būdas kaip atsarginis variantas: procentinis vidinis tarpas skaičiuojamas pagal plotį, todėl padding-top: 56.25% (9 ÷ 16) rezervuoja 16:9 plotą, o turinys jame išdėstomas absoliučiai. Jo reikia tik labai senoms naršyklėms.
Rezervavus vietą pagal santykį, taip pat išvengiama išdėstymo šuolių, kol kraunasi paveikslėliai ir vaizdo įrašai, o tai pagerina kaupiamojo išdėstymo poslinkio (CLS) rodiklį.
Dažniausi santykiai ir kur jie naudojami
Lentelėje rodomi populiariausi formatai su tipiniu panaudojimu: 16:9 – HD ir 4K vaizdo įrašai bei dauguma monitorių, 4:3 – seni ekranai ir kompaktiniai fotoaparatai, 1:1 – kvadratiniai įrašai, 9:16 – trumpi vertikalūs vaizdo įrašai, 3:2 – 35 mm nuotraukos, 21:9 – kinas ir itin platūs monitoriai. Lentelė perskaičiuojama pagal tavo naują plotį, todėl iš karto matai, kokio aukščio reikės kiekvienam formatui.
Dažnai užduodami klausimai
Koks yra 1920 × 1080 kraštinių santykis?
16:9. Toks pat ir 1280 × 720, 2560 × 1440 bei 3840 × 2160 (4K UHD).
Kokį santykį rinktis vertikaliems vaizdo įrašams?
9:16 „Stories“, „Reels“, „TikTok“ ir „Shorts“ turiniui (1080 × 1920). Įrašams sraute „Instagram“ teikia pirmenybę 4:5 (1080 × 1350).
Ar 16:10 yra tas pats, kas 16:9?
Ne. 16:10 (1,6:1) yra kiek aukštesnis nei 16:9 (1,78:1). Šis formatas dažnas nešiojamuosiuose kompiuteriuose, pavyzdžiui, 1920 × 1200 arba 2560 × 1600.
Kodėl gautas aukštis nėra sveikas skaičius?
Nes pasirinktas plotis nėra santykio kartotinis. 1000 px esant 16:9 duoda 562,5 px. Apvalinti iki sveikų pikselių suapvalina iki 563, o pasirinkus 16 kartotinį plotį apvalinti visai nereikia.
Ar dydžio keitimas pakeičia vaizdo kokybę?
Šis įrankis tik skaičiuoja matmenis. Padidinus vaizdą virš pradinio pikselių skaičiaus, jis tampa minkštesnis; norėdamas iš tikrųjų pakeisti failo dydį, naudok vaizdų dydžio keitimo įrankį su šiais skaičiais.
Susiję įrankiai
- PX į REM keitiklis Konvertuok px į rem ir em su bet kuriuo šakniniu šrifto dydžiu, sudaryk masinę lentelę ir vienu spustelėjimu paversk CSS fragmento px reikšmes į rem.
- Vaizdų dydžio keitiklis Keisk JPG, PNG ir WebP vaizdų dydį pikseliais ar procentais, išlaikyk kraštinių santykį ir apdorok kelias nuotraukas iš karto, tiesiog naršyklėje.
- Ekrano raiškos tikrinimas Iškart sužinok ekrano raišką, viewport dydį, įrenginio pikselių santykį, fizinius pikselius, spalvų gylį ir orientaciją su gyvais atnaujinimais.
- Proporcijos ir santykio skaičiuoklė Išspręsk proporciją A:B = C:D ieškomam nariui kryžminiu daugybos būdu ir suprastink santykius, pvz., 12:18:24 ar 1,5:2, iki sveikųjų skaičių, su žingsniais.