Predložak:Skaliranje slike: razlika između inačica

Izvor: Wikipedija
Izbrisani sadržaj Dodani sadržaj
predložak za skaliranje slike preko vw
 
dorada
Redak 1: Redak 1:
<includeonly><div style="margin:auto; text-align: center; width: {{{2|100}}}vw;">
<includeonly><div style="{{#ifeq:{{{3}}}|desno|margin-left: auto; | {{#ifeq:{{{3}}}|lijevo| margin-right: auto; |margin:auto; }} }} width: {{{2|100}}}vw;">
[[Datoteka:{{{1}}}|{{{veličina|50}}}|class=nestalna]]
[[Datoteka:{{{1}}}|{{{veličina|50}}}|class=nestalna]]
</div></includeonly><noinclude>
</div></includeonly><noinclude>
{{TOC_desno}}
[[Datoteka:Nuvola apps important.svg|25px]] '''Predložak je u izradi - ne rabiti ga u člancima!''' [[Datoteka:Nuvola apps important.svg|25px]]


== 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 &#91;&#91;Datoteka:primjer.jpg|'''220px'''&#93;&#93;, sve ostale jedinice nemaju nikakav učinak.
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>&#91;&#91;Datoteka:primjer.jpg|'''220px'''&#93;&#93;</samp>, sve ostale jedinice nemaju nikakav učinak.


Među relativnim jedinicama nalaze se i jedinice '''vw''', '''vh''', '''vmin''' i '''vmax''' koje predstavljaju 1&nbsp;% širine ili visine ''[[viewport]]a''.
Među relativnim jedinicama nalaze se i jedinice '''vw''', '''vh''', '''vmin''' i '''vmax''' koje predstavljaju 1&nbsp;% širine ili visine ''[[viewport]]a''.


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

== Uporaba ==


'''&#123;&#123;skaliranje slike|''slika''|''veličina''|''ravnanje''&#125;&#125;'''
'''&#123;&#123;skaliranje slike|''slika''|''veličina''|''ravnanje''&#125;&#125;'''


'''Parametri''' su neimenovani, što znači da se navodi samo vrijednost.
'''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>, koja će se prikazati ako se parametar izostavi, ali u tom slučaju mora mu se zadržati pozicija, npr. <samp>&#123;&#123;skaliranje slike||30|lijevo&#125;&#125;</samp>
* '''''slika''''' - navodi se samo ime, bez <samp>datoteka:</samp>, npr. <samp>primjer.jpg</samp>. Ovaj parametar mora se navesti.
* '''''veličina''''' - navodi se samo broj, koji može biti i decimalni (iako za tim nema realne potrebe), ali s decimalnom točkom umjesto zareza, npr. <samp>34.5</samp>. Ako se parametar izostavi, podrazumijevana veličina je 50&nbsp;%, ali mu se mora zadržati pozicija, npr. <samp>&#123;&#123;skaliranje slike|primjer.jpg||lijevo&#125;&#125;</samp>.
* '''''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, podrazumijevana veličina je 50&nbsp;%, ali mu se mora zadržati pozicija, npr. <samp>&#123;&#123;skaliranje slike|primjer.jpg||lijevo&#125;&#125;</samp>. Iako u principu nema ograničenja, za najveću vrijednost pogledati donje napomene.
* '''''ravnanje''''' - lijevo, sredina, desno. Ako se parametar izostavi, slika će biti na sredini (centrirana). [[Datoteka:Baustelle.svg|30px]]
* '''''ravnanje''''' - dopuštene vrijednosti su '''lijevo''', '''sredina''', '''desno'''. Ako se parametar izostavi, slika će biti na sredini (centrirana).


==== Napomene i ograničenja ====
'''Napomena''': 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, &#123;&#123;skaliranje slike|primjer.jpg|100&#125;&#125; prikazat će širinu 355px, iako je širina ''viewporta'' veća.
''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 <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>&#123;&#123;skaliranje slike|primjer.jpg|200&#125;&#125;</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>&#123;&#123;skaliranje slike|primjer.jpg|34.6|''ravnanje''&#125;&#125;</samp>. Kao veličina za slike u SVG formatu uzima se nominalna širina.


== Primjeri ==
== Primjeri ==
Za djelovanje primjera povećajte ili smanjite širinu prozora preglednika.
<nowiki>{{skaliranje slike|Rovinj by night.jpg|10}}</nowiki>

==== 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 lijevo ====
<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}}
{{skaliranje slike|Rovinj by night.jpg|10}}
<nowiki>{{skaliranje slike|Rovinj by night.jpg|30}}</nowiki>
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|30}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|30}}
{{skaliranje slike|Rovinj by night.jpg|30}}
<nowiki>{{skaliranje slike|Rovinj by night.jpg|50}}</nowiki>
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|50}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|50}}
{{skaliranje slike|Rovinj by night.jpg|50}}
<nowiki>{{pslika|Rovinj by night.jpg|70}}</nowiki>
<samp><nowiki>{{skaliranje slike|Rovinj by night.jpg|70}}</nowiki></samp>
{{skaliranje slike|Rovinj by night.jpg|70}}
{{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''.


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

Inačica od 11. kolovoza 2019. u 01:51

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, 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).

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.

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

50

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

50

Ravnanje lijevo

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

50

Ravnanje lijevo

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

50

Usporedba veličine skaliranja

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

50

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

50

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

50

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

50

Puna širina

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

50

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.