Larghezza dell'immagine in HTML
Per impostazione predefinita, le immagini vengono visualizzate con le loro
dimensioni reali. Ad esempio, l'immagine
con la faccina sorridente che abbiamo mostrato sopra ha
dimensioni reali di 130 per 130
pixel e questa è la dimensione che vediamo
nel browser.
Se lo si desidera, è possibile modificare le dimensioni dell'immagine,
impostandone la larghezza. Questo si fa con l'attributo
width.
Ad esempio, impostiamo la larghezza della nostra immagine
a 100 pixel. Per farlo, specifichiamo il valore
dell'attributo width come il numero 100,
in questo modo:
width="100"
Quale sarà la dimensione dell'immagine sullo schermo?
Si potrebbe pensare che sarà: larghezza 100
pixel, come abbiamo impostato, e l'altezza originale
di 130, poiché non l'abbiamo impostata. In
realtà, non sarà così.
La larghezza sarà effettivamente di 100 pixel,
mentre l'altezza si adatterà in modo che le proporzioni
dell'immagine non vengano distorte, diventando quindi anch'essa
100 pixel.
Eseguiamo e verifichiamo:
<img src="smile.png" width="100">
:
Imposta la larghezza della tua immagine a 300
pixel.
