Atributul width
Atributul width definește lățimea imaginii,
care este specificată de tagul
img.
În prezent, acest atribut este permis
a fi utilizat doar pentru imagini,
iframe,
video
și alte câteva tag-uri.
Este permisă specificarea valorilor în pixeli sau procente. În cazul definirii dimensiunii în procente, acestea vor fi luate din lățimea elementului părinte. În cazul definirii dimensiunii în pixeli, unitățile de măsură nu sunt specificate.
Dacă pentru imagine nu este definită nici lățimea, nici înălțimea - imaginea va avea dimensiunea sa reală. Dacă este definită înălțimea - imaginea va avea înălțimea definită, iar lățimea se va ajusta astfel încât proporțiile sale să nu fie distorsionate. Dacă este definită doar lățimea - în mod similar, imaginea se va ajusta în înălțime astfel încât să păstreze proporțiile. Dacă sunt definite 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 va fi mărită, dar va pierde din calitate.
Se recomandă să definiți lățimea și înălțimea imaginilor în atribute - în acest caz browser-ul 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 definiți lățimea la 100px.
În acest caz, imaginea pe ecran va arăta
la 100 de pixeli, dar va avea dimensiunea
întregii mii și, în consecință, se va încărca
mult mai lent.
Exemple de lucru le puteți vedea aici:
tag-ul img.
