Img silt

Silt img loob pildi. Pildi asukoht määratakse atribuudis src. Ei vaja lõpetavat silti.

Atribuudid

Atribuut	Kirjeldus
src	Määrab pildi asukoha. Kohustuslik atribuut.
alt	Alternatiivne tekst, mida kuvatakse pildi asemel, kui seda ei leita (näiteks kui selle asukoht on valesti määratud). Kohustuslik atribuut. Selle puudumisel annab validaator (programm, mis kontrollib HTML-i või CSS-i korrektsust) veateate.
width	Pildi laius, pikslites (sel juhul mõõtühikut ei märgita) või protsentides pildi vanems elemendist.
height	Pildi kõrgus, pikslites (sel juhul mõõtühikut ei märgita) või protsentides pildi vanems elemendist.

Nüansid

Kui pildile pole määratud ei laiust ega kõrgust - on pildil selle tegelik suurus. Kui on määratud kõrgus - saab pilt määratud kõrguse, ja laius kohandub nii, et selle proportsioonid ei moonutuks.

Kui on määratud ainult laius - samamoodi kohandub pilt kõrguselt nii, et säilitada proportsioonid.

Kui on määratud nii laius kui kõrgus - võivad pildi proportsioonid moonutuda (või ka mitte, nagu juhtub). Kui laius või kõrgus (või mõlemad koos) on suuremad kui tegelik - suureneb pilt, kuid kaotab kvaliteeti.

Soovitatav on määrata piltidele laius ja kõrgus atribuutidena (mitte läbi CSS-i) - sellisel juhul laeb brauser pildid kiiremini - tal ei ole vaja arvutada iga pildi suurust pärast selle saamist.

Ei ole soovitatav vähendada pildi tegelikke suurusi ilma vajaduseta. Näiteks, pildi tegelik suurus on 1000 korda 1000 pikslit, kuid te määrate selle laiuseks 100px. Sellisel juhul näeb pilt ekraanil välja 100 pikslit, kuid selle faili suurus on endiselt terve tuhat ja vastavalt laeb palju kauem aega.

Näide

Lisame veebilehele pildi ja ei määra atribuute height ega width. Pildil on selle tegelik suurus:

:

Näide

Proovime pildile lisada laiuse abil atribuuti width, kõrgus peaks sellisel juhul kohanduma nii, et säilitada pildi proportsioonid:

:

Näide

Nüüd lisame pildile kõrguse abil atribuuti height, laius kohandub sellisel juhul nii, et säilitada pildi proportsioonid:

:

Näide

Määrame pildile korraga nii kõrguse kui ka laiuse. Pildi proportsioonid peaksid sellisel juhul moonutama (mitte tingimata, kuid antud juhul on kõrgus ja laius valitud nii, et proportsioonid moonutuvad):

:

Näide

Määrame pildile vale asukoha (lihtsuse mõttes jätame selle tühjaks). Pildi asemel näeme atribuudi alt sisu (tundub, et see on tavaline tekst - kuid proovige seda kopeerida - te ei saa midagi, see tõmmatakse nagu pilt):

:

Vaata ka