Width-attribuutti
width-attribuutti asettaa kuvan leveyden,
joka on määritelty img-elementillä.
Nykyään tätä attribuuttia saa käyttää vain kuville,
iframe-elementeille,
video-elementeille
ja joillekin muille elementeille.
Arvoja saa antaa pikseleinä tai prosentteina. Jos koko annetaan prosentteina, ne lasketaan vanhemman elementin leveydestä. Jos koko annetaan pikseleinä, mittayksikköä ei ilmoiteta.
Jos kuvalle ei ole asetettu leveyttä eikä korkeutta - kuva näytetään sen todellisessa koossa. Jos korkeus on asetettu - kuvan korkeus asetetaan annettuun arvoon, ja leveys sopeutuu niin, että sen mittasuhteet eivät vääristy. Jos vain leveys on asetettu - vastaavasti kuvan korkeus sopeutuu säilyttääkseen mittasuhteet. Jos sekä leveys että korkeus on asetettu - kuvan mittasuhteet voivat vääristyä (tai eivät, osaatko arvata). Jos leveys tai korkeus (tai molemmat yhdessä) ovat suurempia kuin todellinen koko - kuva suurenee, mutta menettää laatua.
On suositeltavaa asettaa kuville leveys ja korkeus attribuuteissa - tällöin selain lataa kuvat nopeammin - sillä ei tarvitse laskea kunkin kuvan kokoa sen vastaanottamisen jälkeen.
Ei ole suositeltavaa pienentää kuvien
todellisia kokoja tarpeettomasti. Esimerkiksi,
kuvan todellinen koko on 1000 kertaa 1000
pikseliä, mutta asetat sille leveyden 100px.
Tässä tapauksessa kuva näytöllä näyttää
100 pikseliä, mutta sen koko on
vielä tuhat ja vastaavasti se latautuu
paljon hitaammin.
Katso esimerkkejä käytöstä täältä:
img-elementti.
