Oznaka img

Oznaka img ustvari sliko. Pot do slike je določena v atributu src. Ne zahteva zapiralne oznake.

Atributi

Atribut	Opis
src	Določa pot do slike. Obvezen atribut.
alt	Nadomestno besedilo, ki bo prikazano namesto slike, če ta ni najdena (na primer, če je pot do nje napačno določena). Obvezen atribut. Če ga ni, se bo pritoževal validator (program, ki preverja pravilnost HTML ali CSS).
width	Širina slike v slikovnih pikah (v tem primeru se merske enote ne navajajo) ali v odstotkih od starševskega elementa slike.
height	Višina slike v slikovnih pikah (v tem primeru se merske enote ne navajajo) ali v odstotkih od starševskega elementa slike.

Podrobnosti

Če za sliko nista določeni niti širina niti višina - bo slika imela svojo dejansko velikost. Če je določena višina - bo slika dobila določeno višino, po širini pa se bo prilagodila tako, da njeni razmerji ne bodo popačena.

Če je določena samo širina - podobno, se bo slika po višini prilagodila tako, da ohrani razmerja.

Če sta določeni tako širina kot višina - lahko razmerja slike postanejo popačena (ali pa tudi ne, odvisno od naključja). Če sta širina ali višina (ali oba skupaj) večja od dejanske - se bo slika povečala, vendar izgubila na kakovosti.

Priporočljivo je, da določate širino in višino slik v atributih (in ne prek CSS) - v tem primeru bo brskalnik hitreje nalagal slike - ni mu treba izračunati velikosti vsake slike po njenem pridobitvi.

Ni priporočljivo zmanjševati dejanske velikosti slike brez potrebe. Na primer, dejanska velikost slike je 1000 krat 1000 slikovnih pik, vi pa ji določite širino 100px. V tem primeru bo slika na zaslonu videti 100 slikovnih pik, vendar bo imela velikost celih tisoč in se bo zato nalagala veliko dlje.

Primer

Dodajmo sliko na spletno mesto in ne določajmo atributov height in width. Slika bo imela svojo dejansko velikost:

:

Primer

Poskusimo sliki dodati širino z uporabo atributa width, višina naj se pri tem prilagodi tako, da ohrani razmerja slike:

:

Primer

Zdaj pa dodajmo sliki višino z uporabo atributa height, širina se naj pri tem prilagodi tako, da ohrani razmerja slike:

:

Primer

Hkrati določimo sliki tako višino kot širino. Razmerja slike naj bi postala popačena (ne nujno, vendar so v tem primeru višina in širina izbrani tako, da razmerja popačijo):

:

Primer

Določimo napačno pot do slike (za enostavnost jo pustimo prazno). Namesto slike bomo videli vsebino atributa alt (zdi se, da je to navadno besedilo - vendar poskusite ga kopirati - ne bo vam uspelo, vleči se bo kot slika):

:

Glejte tudi