Largeur de l'image en HTML

Par défaut, les images sont affichées avec leur taille réelle. Par exemple, cette image de smiley que nous avons affichée ci-dessus a une taille réelle de 130 sur 130 pixels et c'est cette taille d'image que nous voyons dans le navigateur.

Si vous le souhaitez, vous pouvez modifier la taille de l'image en lui donnant une largeur. Cela se fait grâce à l'attribut width.

Par exemple, donnons à notre image une largeur de 100 pixels. Pour cela, indiquons la valeur 100 pour l'attribut width, comme ceci :

Quelle sera alors la taille de l'image à l'écran ? On pourrait penser à ceci : une largeur de 100 pixels, comme nous l'avons défini, et une hauteur réelle de 130, puisque nous ne l'avons pas définie. En fait, ce ne sera pas le cas.

La largeur sera bien de 100 pixels, mais la hauteur s'adaptera pour que les proportions de l'image ne soient pas déformées, elle deviendra donc également de 100 pixels.

Lançons et vérifions cela :

: