Predložak:Skaliranje slike: razlika između inačica
predložak za skaliranje slike preko vw |
dorada |
||
Redak 1: | Redak 1: | ||
<includeonly><div style="margin:auto; |
<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 |
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''. |
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'''. |
Predložak skalira (odnosno povećava ili smanjuje) sliku prema širini ''viewporta'' rabeći jedinicu '''vw'''. |
||
⚫ | |||
'''{{skaliranje slike|''slika''|''veličina''|''ravnanje''}}''' |
'''{{skaliranje slike|''slika''|''veličina''|''ravnanje''}}''' |
||
'''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> |
* '''''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 |
* '''''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 %, 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''''' - lijevo, sredina, desno. Ako se parametar izostavi, slika će biti na sredini (centrirana). |
* '''''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 <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. |
|||
== Primjeri == |
== 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 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 ==== |
|||
⚫ | |||
{{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>{{ |
<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}}
Odstupanje ravnanja kod prevelikog skaliranja: {{skaliranje slike|primjer.jpg|60}}
Ravnanje lijevo
{{skaliranje slike|Rovinj by night.jpg|50|lijevo}}
Ravnanje lijevo
{{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.