Eticheta img

Eticheta img creează o imagine. Calea către imagine este specificată în atributul src. Nu necesită etichetă de închidere.

Atribute

Atribut	Descriere
src	Specifică calea către imagine. Atribut obligatoriu.
alt	Text alternativ care va fi afișat în locul imaginii, dacă aceasta nu este găsită (de exemplu, calea către ea este specificată incorect). Atribut obligatoriu. În absența lui, validatorul (programul care verifică corectitudinea HTML sau CSS) va semnala o eroare.
width	Lățimea imaginii, în pixeli (în acest caz unitățile de măsură nu se specifică) sau în procente față de părintele imaginii.
height	Înălțimea imaginii, în pixeli (în acest caz unitățile de măsură nu se specifică) sau în procente față de părintele imaginii.

Nuanțe

Dacă pentru imagine nu este setată nici lățimea, nici înălțimea - imaginea va avea dimensiunea sa reală. Dacă este setată înălțimea - imaginea va avea înălțimea stabilită, iar lățimea se va ajusta astfel încât proporțiile sale să nu fie distorsionate.

Dacă este setată doar lățimea - similar, imaginea se va ajusta în înălțime pentru a păstra proporțiile.

Dacă sunt setate atât lățimea, cât și înălțimea - proporțiile imaginii pot fi distorsionate (sau poate că nu, după cum ghiciți). Dacă lățimea sau înălțimea (sau ambele împreună) sunt mai mari decât dimensiunea reală - imaginea se va mări, dar va pierde din calitate.

Se recomandă să setați lățimea și înălțimea imaginilor în atribute (și nu prin CSS) - în acest caz browserul va încărca imaginile mai rapid - nu trebuie să calculeze dimensiunea fiecărei imagini după ce o primește.

Nu este recomandat să reduceți dimensiunile reale ale imaginii fără necesitate. De exemplu, dimensiunea reală a imaginii este 1000 pe 1000 pixeli, iar voi îi setați lățimea la 100px. În acest caz, imaginea pe ecran va arăta la 100 pixeli, dar va avea dimensiunea întregii mii și, în consecință, se va încărca mult mai lent.

Exemplu

Să adăugăm o imagine pe site și să nu stabilim atributele height și width. Imaginea va avea dimensiunea sa reală:

:

Exemplu

Să încercăm să adăugăm imaginii lățime cu ajutorul atributului width, înălțimea ar trebui să se ajusteze astfel încât să păstreze proporțiile imaginii:

:

Exemplu

Iar acum să adăugăm imaginii înălțime cu ajutorul atributului height, lățimea se va ajusta astfel încât să păstreze proporțiile imaginii:

:

Exemplu

Să setăm simultan imaginii atât înălțimea, cât și lățimea. Proporțiile imaginii ar trebui să fie distorsionate (nu neapărat, dar în acest caz înălțimea și lățimea sunt alese astfel încât proporțiile să se distorsioneze):

:

Exemplu

Să setăm o cale incorectă către imagine (pentru simplitate o vom lăsa goală). În locul imaginii vom vedea conținutul atributului alt (se pare că este un text obișnuit - dar încercați să îl copiați - nu veți reuși, se va trage ca o imagine):

:

Vedeți și