Kuvan leveys HTML:ssä
Oletusarvoisesti kuvat näytetään niiden
todellisessa koossa. Esimerkiksi se hymiökuva,
jota näytimme aiemmin, on
todellisen kooltaan 130 kertaa 130
pikseliä, ja saman koon kuvan me
näemme selaimessa.
Haluttaessa voit muuttaa kuvan kokoa
asettamalla sille leveyden. Tämä tehdään
width-attribuutilla.
Esimerkkinä asetetaan kuvallamme
leveys 100 pikseliä. Tätä varten
width-attribuutin arvoksi annetaan luku 100,
näin:
width="100"
Mitä kokoa kuvalla on näytöllä?
Voisi ajatella, että seuraava: leveys 100
pikseliä, kuten asetimme, ja todellinen korkeus
130, koska emme asettaneet sitä.
Itse asiassa näin ei käy.
Leveys tulee todella olemaan 100 pikseliä,
mutta korkeus sopeutuu niin, että kuvan
mittasuhteet eivät vääristy, eli siitä tulee myös
100 pikseliä.
Käynnistetään ja varmistutaan siitä:
<img src="smile.png" width="100">
:
Aseta kuvallesi leveys 300
pikseliä.
