Utilia
Kategorije ▾
Jezik: sr ▾

Kalkulator odnosa stranica

Skrati bilo koju širinu i visinu na odnos stranica, promeni veličinu uz zadržavanje proporcija, uporedi 16:9, 4:3 i 21:9 i kopiraj CSS aspect-ratio kod.

Uobičajeni odnosi

Odnos ili originalna veličina

Upiši odnos (16 i 9) ili stvarne dimenzije (1920 i 1080).

Nova veličina (čuva odnos)

Upiši novu širinu da dobiješ visinu ili novu visinu da dobiješ širinu.

Skraćeni odnos
–
Decimalni odnos
–
Orijentacija
–
Najbliži standard
–

Pregled

Uobičajeni odnosi

OdnosDecimalnoVeličinaTipična upotreba

Kako se koristi kalkulator odnosa stranica

  1. Izaberi jedan od Uobičajeni odnosi (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) ili upiši svoje vrednosti u polje Odnos ili originalna veličina. Možeš da uneseš odnos (16 i 9) ili stvarne dimenzije slike, videa ili ekrana (1920 i 1080).
  2. Pročitaj rezultate: Skraćeni odnos, Decimalni odnos (širina podeljena visinom), Orijentacija i Najbliži standard. Znak „≈“ znači da je tvoja veličina blizu tog standarda, ali mu nije potpuno jednaka.
  3. U odeljku Nova veličina (čuva odnos) upiši Nova širina da dobiješ odgovarajuću visinu ili Nova visina da dobiješ širinu. Red ispod prikazuje proračun. Isključi Zaokruži na cele piksele ako ti treba tačna vrednost, na primer za dimenzije štampe u milimetrima.
  4. Dugme Zameni širinu i visinu pretvara položeni odnos u uspravni (16:9 postaje 9:16) i obrnuto.
  5. Pregled crta okvir sa tvojim odnosom, a tabela navodi veličinu svakog uobičajenog odnosa pri tvojoj novoj širini.
  6. Kopiraj CSS kod dugmetom Kopiraj.

Sve se računa u tvom pregledaču. Ništa što upišeš ne šalje se na server.

Kako funkcioniše proračun

Odnos stranica je širina podeljena visinom, zapisana kao dva cela broja. Da bi ga skratio, alat deli obe strane njihovim najvećim zajedničkim sadržaocem (NZS): NZS brojeva 1920 i 1080 je 120, pa je 1920:1080 = 16:9. Decimalni unosi se prvo množe stepenom broja deset (2,39:1 postaje 239:100).

Promena veličine uz zadržavanje proporcija je prosto pravilo trojno:

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

Primer: video u odnosu 16:9 širine 1280 px ima visinu 1280 × 9 ÷ 16 = 720 px.

Neki ekrani imaju „neparne“ odnose. Laptop sa 1366 × 768 skraćuje se na 683:384, a to je 1,779:1, tek za dlaku od 16:9 (1,778:1), pa se 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 tabeli.

CSS svojstvo aspect-ratio

aspect-ratio: 16 / 9; govori pregledaču da sam izračuna dimenziju koja nedostaje: uz width: 100% visina se podešava automatski, a okvir se skalira zajedno sa svojim kontejnerom. Radi u svim aktuelnim pregledačima (od 2021) i idealno je za ugrađene video snimke, kartice, rezervisana mesta za slike i sličice. Na slikama ga kombinuj sa object-fit: cover da se slika iseče umesto da se razvuče.

Kod uključuje i stariju tehniku sa padding-top kao rezervno rešenje: procenat u padding-u računa se od širine, pa padding-top: 56.25% (9 ÷ 16) rezerviše površinu 16:9, a sadržaj se unutar nje apsolutno pozicionira. Treba ti samo za veoma stare pregledače.

Rezervisanje prostora preko odnosa stranica sprečava i pomeranje rasporeda dok se slike i video učitavaju, što poboljšava rezultat Cumulative Layout Shift (CLS).

Česta pitanja

Koji je odnos stranica 1920 × 1080?

16:9. Isto važi za 1280 × 720, 2560 × 1440 i 3840 × 2160 (4K UHD).

Koji odnos da koristim za vertikalne video snimke?

9:16 za storije, Reels, TikTok i Shorts (1080 × 1920). Za objave u fidu Instagram preferira 4:5 (1080 × 1350).

Da li je 16:10 isto što i 16:9?

Ne. 16:10 (1,6:1) je nešto viši od 16:9 (1,78:1). Čest je na laptopovima, na primer 1920 × 1200 ili 2560 × 1600.

Zašto visina posle promene veličine nije ceo broj?

Zato što širina koju si izabrao nije umnožak odnosa. 1000 px u odnosu 16:9 daje 562,5 px. Opcija Zaokruži na cele piksele zaokružuje to na 563, a izborom širine koja je umnožak broja 16 zaokruživanje se potpuno izbegava.

Da li promena veličine utiče na kvalitet slike?

Ovaj alat samo računa dimenzije. Povećavanje slike preko njenih originalnih piksela čini je mekšom. Da zaista promeniš veličinu fajla, upotrebi alat za promenu veličine slika sa ovim brojevima.

Srodni alati