Kalkulačka pomeru strán

Ako používať kalkulačku pomeru strán

1. Vyber jeden z Bežných pomerov (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) alebo zadaj vlastné hodnoty do poľa Pomer alebo pôvodná veľkosť. Môžeš zadať pomer (16 a 9) alebo skutočné rozmery obrázka, videa či obrazovky (1920 a 1080).
2. Prečítaj si výsledky: Zjednodušený pomer, Desatinný pomer (šírka delená výškou), Orientáciu a Najbližší štandard. Znak „≈“ znamená, že tvoj rozmer je tomuto štandardu blízky, no nie presne rovnaký.
3. V časti Nová veľkosť (zachová pomer) zadaj Novú šírku a získaš zodpovedajúcu výšku, alebo zadaj Novú výšku a získaš šírku. Riadok pod poľami ukazuje výpočet. Ak potrebuješ presnú hodnotu, napríklad pre rozmery tlače v milimetroch, zruš začiarknutie Zaokrúhliť na celé pixely.
4. Tlačidlo Vymeniť šírku a výšku zmení pomer na šírku na pomer na výšku (16:9 sa zmení na 9:16) a naopak.
5. Náhľad vykreslí rámček s tvojím pomerom a tabuľka uvádza veľkosť každého bežného pomeru pri tvojej novej šírke.
6. Kód CSS skopíruješ tlačidlom Kopírovať.

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Ako výpočet funguje

Pomer strán je šírka delená výškou, zapísaná ako dve celé čísla. Na zjednodušenie nástroj vydelí obe strany ich najväčším spoločným deliteľom (NSD): NSD čísel 1920 a 1080 je 120, takže 1920:1080 = 16:9. Desatinné vstupy sa najprv vynásobia mocninou desiatich (2,39:1 sa zmení na 239:100).

Zmena veľkosti so zachovaním proporcií je obyčajná trojčlenka:

• nová výška = nová šírka × pôvodná výška ÷ pôvodná šírka
• nová šírka = nová výška × pôvodná šírka ÷ pôvodná výška

Príklad: video 16:9 so šírkou 1280 px má výšku 1280 × 9 ÷ 16 = 720 px.

Niektoré obrazovky majú „nepárne“ pomery. Notebook s rozlíšením 1366 × 768 sa zjednoduší na 683:384, teda 1,779:1, o chlp od 16:9 (1,778:1), a preto sa zobrazí „≈ 16:9“. Monitory predávané ako 21:9 majú v skutočnosti pomer 64:27 (2560 × 1080) alebo 43:18 (3440 × 1440), preto sa v tabuľke objavujú oba.

Vlastnosť CSS aspect-ratio

Zápis aspect-ratio: 16 / 9; prikáže prehliadaču dopočítať chýbajúci rozmer: pri width: 100% sa výška určí automaticky a rámček sa mení spolu so svojím kontajnerom. Vlastnosť funguje vo všetkých súčasných prehliadačoch (od roku 2021) a hodí sa na vložené videá, karty, zástupné obrázky a miniatúry. Pri obrázkoch ju skombinuj s object-fit: cover, aby sa obrázok orezal namiesto deformácie.

Výsledný kód obsahuje aj staršiu techniku s padding-top ako záložné riešenie: percentuálne odsadenie sa počíta zo šírky, takže padding-top: 56.25% (9 ÷ 16) vyhradí plochu 16:9 a obsah sa v nej umiestni absolútne. Túto techniku potrebuješ len pre veľmi staré prehliadače.

Vyhradenie miesta pomocou pomeru zároveň bráni posunom rozloženia počas načítavania obrázkov a videí, čo zlepšuje skóre Cumulative Layout Shift (CLS).