Bredde på bilde i HTML
Som standard vises bilder i sin
faktiske størrelse. For eksempel, det bildet
med smilefjeset som vi viste ovenfor, har en
faktisk størrelse på 130 ganger 130
piksler, og det er denne størrelsen vi
ser i nettleseren.
Om ønskelig kan du endre bildestørrelsen
ved å angi en bredde. Dette gjøres med attributtet
width.
La oss for eksempel sette bredden på bildet vårt
til 100 piksler. For å gjøre dette, angir vi
nummeret 100 som verdien for attributtet
width, slik:
width="100"
Hvilken størrelse vil bildet ha på skjermen?
Man kan tenke at det blir slik: bredde 100
piksler, som vi angav, og den faktiske høyden
på 130, siden vi ikke angav den. Men
det vil faktisk ikke bli slik.
Bredden vil virkelig være 100 piksler,
men høyden vil tilpasse seg slik at bildets
proposjoner ikke forvrenges, det vil si at den også blir
100 piksler.
La oss kjøre koden og se at det stemmer:
<img src="smile.png" width="100">
:
Sett bredden på bildet ditt til 300
piksler.