Kalkulator omjera stranica

Kako koristiti kalkulator omjera stranica

1. Odaberi jedan od Uobičajenih omjera (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) ili upiši vlastite vrijednosti u Omjer ili izvorna veličina. Možeš unijeti omjer (16 i 9) ili stvarne dimenzije slike, videozapisa ili zaslona (1920 i 1080).
2. Pročitaj rezultate: Skraćeni omjer, Decimalni omjer (širina podijeljena s visinom), Orijentaciju i Najbliži standard. Znak „≈“ znači da je tvoja veličina blizu tog standarda, ali mu nije posve jednaka.
3. U odjeljku Nova veličina (zadržava omjer) upiši Novu širinu da dobiješ odgovarajuću visinu ili Novu visinu da dobiješ širinu. Redak ispod prikazuje izračun. Isključi Zaokruži na cijele piksele ako trebaš točnu vrijednost, na primjer za ispis u milimetrima.
4. Zamijeni širinu i visinu pretvara položeni omjer u uspravni (16:9 postaje 9:16) i obrnuto.
5. Pregled crta okvir u tvom omjeru, a tablica navodi veličinu svakog uobičajenog omjera pri tvojoj novoj širini.
6. Kopiraj CSS kod gumbom Kopiraj.

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Kako radi izračun

Omjer stranica je širina podijeljena s visinom, zapisana kao dva cijela broja. Da bi ga skratio, alat podijeli obje strane njihovim najvećim zajedničkim djeliteljem (NZD): NZD brojeva 1920 i 1080 iznosi 120, pa je 1920:1080 = 16:9. Decimalni unosi najprije se množe potencijom broja deset (2,39:1 postaje 239:100).

Promjena veličine uz zadržane proporcije obična je trojna jednadžba:

• nova visina = nova širina × izvorna visina ÷ izvorna širina
• nova širina = nova visina × izvorna širina ÷ izvorna visina

Primjer: videozapis 16:9 širine 1280 px visok je 1280 × 9 ÷ 16 = 720 px.

Neki zasloni imaju „neobične“ omjere. Prijenosno računalo od 1366 × 768 skraćuje se na 683:384, što je 1,779:1, samo za dlaku od 16:9 (1,778:1), pa alat prikazuje „≈ 16:9“. Monitori koji se prodaju kao 21:9 zapravo su 64:27 (2560 × 1080) ili 43:18 (3440 × 1440), zato se oba nalaze u tablici.

CSS svojstvo aspect-ratio

aspect-ratio: 16 / 9; govori pregledniku da sam izračuna nedostajuću dimenziju: uz width: 100% visina se prilagođava automatski, a okvir se skalira s kontejnerom. Radi u svim aktualnim preglednicima (od 2021.) i idealno je za ugrađene videozapise, kartice, rezervirana mjesta za slike i sličice. Na slikama ga kombiniraj s object-fit: cover da se slika obreže umjesto da se razvuče.

Kod uključuje i stariju tehniku s padding-top kao rezervnu opciju: postotni padding računa se od širine, pa padding-top: 56.25% (9 ÷ 16) rezervira područje 16:9, a sadržaj se unutar njega apsolutno pozicionira. Treba ti samo za vrlo stare preglednike.

Rezerviranje prostora omjerom sprječava i pomake rasporeda dok se slike i videozapisi učitavaju, što poboljšava ocjenu Cumulative Layout Shift (CLS).