Lățimea imaginii în HTML
Implicit, imaginile sunt afișate la dimensiunea lor
reală. De exemplu, acea imagine
cu zâmbetul pe care am afișat-o mai sus, are
dimensiunea reală de 130 pe 130
pixeli și aceeași dimensiune a imaginii o
vedem în browser.
Dacă se dorește, se poate modifica dimensiunea imaginii,
stabilindu-i o lățime. Acest lucru se face cu ajutorul atributului
width.
Să setăm ca exemplu imaginii noastre
o lățime de 100 pixeli. Pentru aceasta, ca valoare
a atributului width vom indica numărul 100,
astfel:
width="100"
Ce dimensiune va avea imaginea pe ecran?
S-ar putea gândi că următoarea: lățimea 100
pixeli, cum am setat, și înălțimea reală
de 130, deoarece nu am setat-o. În
realitate, nu va fi așa.
Lățimea într-adevăr va fi de 100 pixeli,
dar înălțimea se va ajusta astfel încât proporțiile
imaginii să nu fie distorsionate, adică va deveni tot
100 pixeli.
Să rulăm și să ne convingem de acest lucru:
<img src="smile.png" width="100">
:
Setați imaginii dvs. o lățime de 300
pixeli.
