Tag img

Tag img kreira sliku. Putanja do slike se navodi u atributu src. Ne zahteva zatvarajući tag.

Atributi

Atribut	Opis
src	Određuje putanju do slike. Obavezan atribut.
alt	Alternativni tekst koji će biti prikazan umesto slike, ako nije pronađena (na primer, ako je putanja pogrešno navedena). Obavezan atribut. U njegovom odsustvu će se žaliti validator (program koji proverava ispravnost HTML-a ili CSS-a).
width	Širina slike, u pikselima (u ovom slučaju jedinice mere se ne navode) ili procentima od roditelja slike.
height	Visina slike, u pikselima (u ovom slučaju jedinice mere se ne navode) ili procentima od roditelja slike.

Nijanse

Ako za sliku nije zadata ni širina, ni visina - slika će imati svoju stvarnu veličinu. Ako je data visina - slika će postati zadate visine, a po širini će se prilagoditi tako da njene proporcije ne budu iskrivljene.

Ako je data samo širina - slično, slika će se prilagoditi po visini tako da sačuva proporcije.

Ako su dati i širina i visina - proporcije slike mogu biti iskrivljene (a možda i ne, kako pogodite). Ako su širina ili visina (ili oba zajedno) veće od stvarne - slika će se povećati, ali će izgubiti na kvalitetu.

Preporučuje se da se širina i visina slicama zadaju u atributima (a ne preko CSS-a) - u ovom slučaju brauzer će brže učitavati slike - nema potrebe da izračunava veličinu svake slike nakon njenog preuzimanja.

Ne preporučuje se smanjivanje stvarnih veličina slike bez potrebe. Na primer, stvarna veličina slike je 1000 na 1000 piksela, a vi ćete joj zadati širinu od 100px. U ovom slučaju slika na ekranu će izgledati na 100 piksela, međutim imaće veličinu na celu hiljadu i, shodno tome, učitavaće se mnogog sporije.

Primer

Hajde da na sajt dodamo sliku i ne dajemo atribute height i width. Slika će imati svoju stvarnu veličinu:

:

Primer

Hajde da probamo slici da dodamo širinu pomoću atributa width, visina pri tome će se prilagoditi tako da sačuva proporcije slike:

:

Primer

A sada hajde da slici dodamo visinu pomoću atributa height, širina će se pri tome prilagoditi tako da sačuva proporcije slike:

:

Primer

Hajde da istovremeno slici dodamo i visinu, i širinu. Proporcije slike pri tome treba da postanu iskrivljene (ne obavezno, ali u ovom slučaju visina i širina su odabrane tako da proporcije budu iskrivljene):

:

Primer

Hajde da postavimo pogrešnu putanju do slike (radi jednostavnosti ostavićemo je praznom). Umesto slike videćemo sadržaj atributa alt (izgleda kao običan tekst - ali probajte da ga kopirate - neće vam uspeti, vući će se kao slika):

:

Vidite takođe