Kalkulačka poměru stran

Jak používat kalkulačku poměru stran

1. Vyber jeden z Běžných poměrů (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) nebo zadej vlastní hodnoty do pole Poměr nebo původní rozměry. Můžeš zadat poměr (16 a 9) i skutečné rozměry obrázku, videa nebo displeje (1920 a 1080).
2. Přečti si výsledky: Zkrácený poměr, Desetinný poměr (šířka dělená výškou), Orientaci a Nejbližší standard. Znak „≈“ znamená, že tvůj rozměr se danému standardu blíží, ale přesně mu neodpovídá.
3. V části Nová velikost (zachová poměr) zadej Novou šířku a získáš odpovídající výšku, nebo Novou výšku a získáš šířku. Řádek pod tím ukazuje výpočet. Pokud potřebuješ přesnou hodnotu, například pro tiskové rozměry v milimetrech, zruš volbu Zaokrouhlit na celé pixely.
4. Tlačítko Prohodit šířku a výšku změní poměr na šířku na poměr na výšku (z 16:9 se stane 9:16) a naopak.
5. Náhled nakreslí obdélník s tvým poměrem a tabulka uvádí rozměr každého běžného poměru při tvé nové šířce.
6. Kód CSS zkopíruješ tlačítkem Kopírovat.

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Jak výpočet funguje

Poměr stran je šířka dělená výškou, zapsaná jako dvě celá čísla. Aby ho nástroj zkrátil, vydělí obě strany jejich největším společným dělitelem (NSD): NSD čísel 1920 a 1080 je 120, takže 1920:1080 = 16:9. Desetinná čísla se nejprve vynásobí mocninou deseti (z 2,39:1 se stane 239:100).

Změna velikosti se zachováním proporcí je obyčejná trojčlenka:

• nová výška = nová šířka × původní výška ÷ původní šířka
• nová šířka = nová výška × původní šířka ÷ původní výška

Příklad: video 16:9 o šířce 1280 px má výšku 1280 × 9 ÷ 16 = 720 px.

Některé displeje mají „nepravidelný“ poměr. Notebook s rozlišením 1366 × 768 se zkrátí na 683:384, tedy 1,779:1, což se od 16:9 (1,778:1) liší jen o chlup, proto se zobrazí „≈ 16:9“. Monitory prodávané jako 21:9 mají ve skutečnosti 64:27 (2560 × 1080) nebo 43:18 (3440 × 1440), a proto jsou v tabulce uvedeny oba.

Vlastnost CSS aspect-ratio

Zápis aspect-ratio: 16 / 9; říká prohlížeči, aby dopočítal chybějící rozměr: při width: 100% se výška přizpůsobí sama a box se škáluje spolu s kontejnerem. Vlastnost funguje ve všech současných prohlížečích (od roku 2021) a hodí se pro vložená videa, karty, zástupné obrázky a náhledy. U obrázků ji zkombinuj s object-fit: cover, aby se obrázek ořízl a nedeformoval.

Kód obsahuje i starší techniku s padding-top jako záložní řešení: procentuální odsazení se počítá ze šířky, takže padding-top: 56.25% (9 ÷ 16) vyhradí plochu 16:9 a obsah se uvnitř umístí absolutně. Potřebuješ ji jen pro opravdu staré prohlížeče.

Vyhrazení místa pomocí poměru navíc zabraňuje poskakování rozložení během načítání obrázků a videí, což zlepšuje skóre Cumulative Layout Shift (CLS).