Predložak:Skaliranje slike - Povijest promjena

Suradnik10 u (test) 17:50, 18. ožujak 2026.

2026-03-18T17:50:21Z

←Starija inačica		Inačica od 18. ožujak 2026. u 17:50
Redak 1:		Redak 1:
	~~<!--'''Predložak:Skaliranje slike'''-->~~<includeonly><div style="width: {{{2\|100}}}vw;		<includeonly><div style="width: {{{2\|100}}}vw;
	{{#switch:{{{3\|}}}		{{#switch:{{{3\|}}}
	\| inline = display: inline-block;		\| inline = display: inline-block;
Redak 9:		Redak 9:
	{{TOC_desno}}		{{TOC_desno}}
	== Uvod ==		== Uvod ==
	Na ~~Wikipediji~~ se obeshrabruje korišćenje [[Jedinice dužine u jeziku CSS#Apsolutne jedinice\|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 <samp>[[Datoteka:primjer.jpg\|'''220px''']]</samp>, sve ostale jedinice nemaju nikakav učinak.		Na HIE se obeshrabruje korišćenje [[Jedinice dužine u jeziku CSS#Apsolutne jedinice\|apsolutnih jedinica]] za veličinu slika. Međutim, u HIE-inom softveru parametar za veličinu slike može se iskazati samo apsolutnom jedinicom '''px''', na primjer <samp>[[Datoteka:primjer.jpg\|'''220px''']]</samp>, 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 ''[[viewport]]a''.		Među relativnim jedinicama nalaze se i jedinice '''vw''', '''vh''', '''vmin''' i '''vmax''' koje predstavljaju 1 % širine ili visine ''[[viewport]]a''.
Redak 25:		Redak 25:

	==== Napomene i ograničenja ====		==== Napomene i ograničenja ====
	''Viewport'' (pojednostavljeno) predstavlja širinu prozora preglednika. 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 <samp>1024px - 205px = 819px</samp> na sučelju ''monobook'' i <samp>1024px - 230px = 794px</samp> na sučelju ''vector''. ( Izračun se vrši na 1024px iako širina prozora može biti mnogo veća.)		''Viewport'' (pojednostavljeno) predstavlja širinu prozora preglednika. Stranice na HIE 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 <samp>1024px - 205px = 819px</samp> na sučelju ''monobook'' i <samp>1024px - 230px = 794px</samp> 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 <samp>818 / 1024 = 0,799</samp> tj. '''79.9''' na sučelju ''monobook'' i <samp>794 / 1024 = 0,775</samp> tj. '''77.5''' na sučelju ''vector''. Veće skaliranje povećava širinu stranice (slika izlazi udesno, pa se mora skrolati).		* Prema navedenom, preporučene '''najveće vrijednosti za skaliranje''' su <samp>818 / 1024 = 0,799</samp> tj. '''79.9''' na sučelju ''monobook'' i <samp>794 / 1024 = 0,775</samp> tj. '''77.5''' na sučelju ''vector''. Veće skaliranje povećava širinu stranice (slika izlazi udesno, pa se mora skrolati).
Redak 71:		Redak 71:
	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.		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.

	* <samp><nowiki><div style="font-family:Arial; font-size: 1.3vw; ">Ova se sličica {{skaliranje slike\|Wiki.png\|2\|inline}} koristi kao logo ~~Wikipedije na hrvatskome jeziku~~. </div></nowiki></samp>		* <samp><nowiki><div style="font-family:Arial; font-size: 1.3vw; ">Ova se sličica {{skaliranje slike\|Wiki.png\|2\|inline}} koristi kao logo HIE. </div></nowiki></samp>

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

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

Suradnik10: Hr logo c --> Wiki

2026-03-18T17:49:09Z

Hr logo c --> Wiki

←Starija inačica		Inačica od 18. ožujak 2026. u 17:49
Redak 71:		Redak 71:
	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.		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.

	* <samp><nowiki><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></nowiki></samp>		* <samp><nowiki><div style="font-family:Arial; font-size: 1.3vw; ">Ova se sličica {{skaliranje slike\|Wiki.png\|2\|inline}} koristi kao logo Wikipedije na hrvatskome jeziku. </div></nowiki></samp>

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

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

WikiSysop: Bot: Automatski unos stranica

2021-11-05T20:11:37Z

Bot: Automatski unos stranica

Nova stranica

<includeonly><div style="width: {{{2|100}}}vw;
{{#switch:{{{3|}}}
| inline = display: inline-block;
| desno = margin-left: auto;
| lijevo = margin-right: auto;
| #default = margin: auto; }} ">
[[Datoteka:{{{1}}}|{{{veličina|50}}}|class=nestalna]]
</div></includeonly><noinclude>
{{TOC_desno}}
== Uvod ==
Na Wikipediji se obeshrabruje korišćenje [[Jedinice dužine u jeziku CSS#Apsolutne jedinice|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 <samp>[[Datoteka:primjer.jpg|'''220px''']]</samp>, 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 ''[[viewport]]a''.

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 <samp>datoteka:</samp>, npr. <samp>primjer.jpg</samp>. Ovaj parametar mora se navesti.
* '''''veličina''''' - je postotak (broj jedinica <samp>vw</samp>), navodi se samo broj, koji može biti i decimalni, ali s decimalnom točkom umjesto zareza, npr. <samp>34.5</samp> (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. <samp>{{skaliranje slike|primjer.jpg||lijevo}}</samp>. 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 [[#Skaliranje teksta i slike|primjer]]).

==== Napomene i ograničenja ====
''Viewport'' (pojednostavljeno) predstavlja širinu prozora preglednika. 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 <samp>1024px - 205px = 819px</samp> na sučelju ''monobook'' i <samp>1024px - 230px = 794px</samp> 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 <samp>818 / 1024 = 0,799</samp> tj. '''79.9''' na sučelju ''monobook'' i <samp>794 / 1024 = 0,775</samp> 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 <samp>primjer.jpg</samp> širine 355px, <samp>{{skaliranje slike|primjer.jpg|200}}</samp> 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 <samp>veličina / 1024</samp>, za navedeni primjer bilo bi <samp>355 / 1024 = 0,346</samp>, odnosno <samp>{{skaliranje slike|primjer.jpg|34.6|''ravnanje''}}</samp>. Kao veličina za slike u SVG formatu uzima se nominalna širina.
* Ako se predložak koristi '''u kontejneru''' (npr. {{tag|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): <samp><nowiki>{{skaliranje slike|primjer.jpg|30}}</nowiki></samp>
{{skaliranje slike|primjer.jpg|30}}

Odstupanje ravnanja kod prevelikog skaliranja: <samp><nowiki>{{skaliranje slike|primjer.jpg|60}}</nowiki></samp>
{{skaliranje slike|primjer.jpg|60}}

==== Ravnanje lijevo ====
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|50|lijevo}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|50|lijevo}}

==== Ravnanje desno ====
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|50|desno}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|50|desno}}

==== Usporedba veličine skaliranja ====
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|10}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|10}}
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|30}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|30}}
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|50}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|50}}
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|70}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|70}}

==== Puna širina ====
Puna širina dobije se ako se navede bilo koji negativan broj: <samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|-1}}</nowiki></samp>
{{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:
* <samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|100}}</nowiki></samp> - 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.

* <samp><nowiki><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></nowiki></samp>

<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>

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

[[Kategorija:Predlošci za slike]]
</noinclude>