Predložak:Skaliranje slike

Uvod

Na Wikipediji se obeshrabruje korišćenje apsolutnih jedinica za veličinu slika. Međutim, u Mediawiki softveru parametar za veličinu slike može se iskazati samo apsolutnom jedinicom px, na primjer [[Datoteka:primjer.jpg|220px]], sve ostale jedinice nemaju nikakav učinak.

Među relativnim jedinicama nalaze se i jedinice vw, vh, vmin i vmax koje predstavljaju 1 % širine ili visine viewporta.

Predložak skalira (odnosno povećava ili smanjuje) sliku prema širini viewporta rabeći jedinicu vw.

Uporaba

{{skaliranje slike|slika|veličina|ravnanje}}

Parametri su neimenovani, što znači da se navodi samo vrijednost.

• slika - navodi se samo ime, bez datoteka:, npr. primjer.jpg. Ovaj parametar mora se navesti.
• veličina - je postotak (broj jedinica vw), navodi se samo broj, koji može biti i decimalni, ali s decimalnom točkom umjesto zareza, npr. 34.5 (iako za tim nema realne potrebe, jednostavno treba odbaciti decimalni dio). Ako je broj negativan, slika će biti u punoj širini. Ako se parametar izostavi (vidjeti napomenu), podrazumijevana veličina je 50 %, ali mu se mora zadržati pozicija, npr. {{skaliranje slike|primjer.jpg||lijevo}}. Iako u principu nema ograničenja, za najveću vrijednost pogledati donje napomene.
• ravnanje - dopuštene vrijednosti su lijevo, sredina, desno. Ako se parametar izostavi, slika će biti na sredini (centrirana). Ako se kao parametar navede inline, slika će se prikazati u liniji teksta (pogledati primjer).

Napomene i ograničenja

Viewport predstavlja aktivnu širinu stranice sa sadržajem ("članak"). Stranice na Wikipediji slijeva imaju fiksni okvir (sidebar) koji je kod sučelja monobook širine 175px, a kod sučelja vector 180px. Dodatno, s obje strane "članka" su margine po 15px na sučelju monobook i po 25px na sučelju vector. Na širini prozora od 1024px (osnovna vrijednost*) "aktivna" širina je 1024px - 205px = 819px na sučelju monobook i 1024px - 230px = 794px na sučelju vector. (* Izračun se vrši na 1024px iako širina prozora može biti mnogo veća.)

• Prema navedenom, preporučene najveće vrijednosti za skaliranje su 818 / 1024 = 0,799 tj. 79.9 na sučelju monobook i 794 / 1024 = 0,775 tj. 77.5 na sučelju vector. Veće skaliranje povećava širinu stranice (slika izlazi udesno, pa se mora skrolati).
• Predložak ne povećava slike, odnosno ako je slika na poslužitelju mala, predložak će je prikazati do njene najveće širine. Na primjer, ako je na poslužitelju slika primjer.jpg širine 355px, {{skaliranje slike|primjer.jpg|200}} prikazat će širinu 355px, a neće je udvostručiti.
• Ravnanje ne funkcionira kod užih slika ako je skaliranje veće od širine slike. Najveća vrijednost skaliranja može se odrediti formulom veličina / 1024, za navedeni primjer bilo bi 355 / 1024 = 0,346, odnosno {{skaliranje slike|primjer.jpg|34.6|ravnanje}}. Kao veličina za slike u SVG formatu uzima se nominalna širina.
• Ako se predložak koristi u kontejneru (npr. <div>...</div>) mora se navesti parametar veličina, inače će slika biti širine prozora preglednika, pomaknuta udesno za širinu sidebara.

Primjeri

Za djelovanje primjera povećajte ili smanjite širinu prozora preglednika.

Slika male širine

Ravnanje je ispravno do granične vrijednosti (34,6 po gornjem izračunu): {{skaliranje slike|primjer.jpg|30}}

Odstupanje ravnanja kod prevelikog skaliranja: {{skaliranje slike|primjer.jpg|60}}

Ravnanje lijevo

{{skaliranje slike|Rovinj by night.jpg|50|lijevo}}

Ravnanje desno

{{skaliranje slike|Rovinj by night.jpg|50|desno}}

Usporedba veličine skaliranja

{{skaliranje slike|Rovinj by night.jpg|10}}

{{skaliranje slike|Rovinj by night.jpg|30}}

{{skaliranje slike|Rovinj by night.jpg|50}}

{{skaliranje slike|Rovinj by night.jpg|70}}

Puna širina

Puna širina dobije se ako se navede bilo koji negativan broj: {{skaliranje slike|Rovinj by night.jpg|-1}}

Preveliko skaliranje

Primjer je izostavljen jer se neće rabiti u praksi, a narušio bi izgled predloška, ali ga možete probati na svojoj SZV:

• {{skaliranje slike|Rovinj by night.jpg|100}} - slika izlazi na desno za vrijednost sidebara.

Skaliranje teksta i slike

Parametrom inline slika se može umetnuti u red teksta. U ovom primjeru se promjenom veličine viewporta mijenjaju veličina i slike i teksta.

• <div style="font-family:Arial; font-size: 1.3vw; ">Ova se sličica {{skaliranje slike|Hr logo c.png|2|inline}} koristi kao logo Wikipedije na hrvatskome jeziku. </div>

Ova se sličica

koristi kao logo Wikipedije na hrvatskome jeziku.

• Da vidite djelovanje ovog primjera povećajte ili smanjite širinu vašeg preglednika.