Képarány-számító

A képarány-számító használata

1. Válassz egyet a Gyakori arányok közül (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), vagy írd be a saját értékeidet az Arány vagy eredeti méret mezőbe. Megadhatsz arányt (16 és 9) vagy egy kép, videó vagy képernyő valódi méretét (1920 és 1080).
2. Olvasd le az eredményt: az Egyszerűsített arányt, a Tizedes arányt (a szélesség osztva a magassággal), a Tájolást és a Legközelebbi szabvány formátumot. A „≈” jel azt jelenti, hogy a méreted közel van az adott szabványhoz, de nem pontosan egyezik vele.
3. Az Új méret (megtartja az arányt) alatt az Új szélesség megadásával megkapod a hozzá tartozó magasságot, az Új magasság megadásával pedig a szélességet. Az alatta lévő sor megmutatja a számítást. Szüntesd meg a Kerekítés egész pixelre jelölését, ha pontos értékre van szükséged, például milliméterben megadott nyomtatási méretekhez.
4. A Szélesség és magasság felcserélése a fekvő arányt állóvá alakítja (a 16:9-ből 9:16 lesz), és fordítva.
5. Az Előnézet egy téglalapot rajzol a megadott aránnyal, a táblázat pedig felsorolja az összes gyakori arány méretét az új szélességednél.
6. A CSS-kódot a Másolás gombbal másolhatod ki.

Hogyan működik a számítás?

A képarány a szélesség és a magasság hányadosa, két egész számként felírva. Az egyszerűsítéshez az eszköz mindkét oldalt elosztja a legnagyobb közös osztójukkal (LNKO): az 1920 és az 1080 LNKO-ja 120, tehát 1920:1080 = 16:9. A tizedes törtet tartalmazó bemenetet előbb megszorozza a tíz megfelelő hatványával (a 2,39:1-ből 239:100 lesz).

Az arány megtartásával történő átméretezés egyszerű hármasszabály:

• új magasság = új szélesség × eredeti magasság ÷ eredeti szélesség
• új szélesség = új magasság × eredeti szélesség ÷ eredeti magasság

Példa: egy 1280 px széles 16:9-es videó magassága 1280 × 9 ÷ 16 = 720 px.

Egyes képernyők „furcsa” arányúak. Egy 1366 × 768-as laptop 683:384-re egyszerűsödik, ami 1,779:1, vagyis hajszálnyira van a 16:9-től (1,778:1), ezért látod azt, hogy „≈ 16:9”. A 21:9-ként árult monitorok valójában 64:27 (2560 × 1080) vagy 43:18 (3440 × 1440) arányúak, ezért szerepel mindkettő a táblázatban.

A CSS aspect-ratio tulajdonsága

Az aspect-ratio: 16 / 9; megmondja a böngészőnek, hogy számolja ki a hiányzó méretet: width: 100% mellett a magasság automatikusan követi a szélességet, és a doboz együtt skálázódik a tárolójával. Minden jelenlegi böngészőben működik (2021 óta), és kiváló videóbeágyazásokhoz, kártyákhoz, képhelyőrzőkhöz és indexképekhez. Képeknél kombináld az object-fit: cover beállítással, hogy a kép nyújtás helyett vágással töltse ki a dobozt.

A kód tartalmazza a régebbi padding-top technikát is tartalékként: a százalékos belső margin a szélességből számolódik, így a padding-top: 56.25% (9 ÷ 16) egy 16:9-es területet foglal le, a tartalmat pedig abszolút pozícióval helyezzük el benne. Erre csak nagyon régi böngészőkhöz van szükség.

Az arányos helyfoglalás megakadályozza az elrendezés elugrását is, amíg a képek és a videók betöltődnek, ez pedig javítja a Cumulative Layout Shift (CLS) pontszámot.