HTML Larghezza e altezza dell'immagine


Esempio

Nota: gli attributi width e height non sono deprecati sulle immagini e non sono mai stati. Il loro uso è stato reso molto più severo.

Le dimensioni di un'immagine possono essere specificate utilizzando gli attributi width e height del tag immagine:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Specificando la width e l' height di un'immagine, la struttura fornisce al browser un suggerimento su come dovrebbe essere la pagina, anche se si sta solo specificando la dimensione effettiva dell'immagine. Se le dimensioni dell'immagine non sono specificate, il browser dovrà ricalcolare il layout della pagina dopo che l'immagine è stata caricata, il che potrebbe causare il "saltare" durante il caricamento della pagina.

4.1

È possibile assegnare all'immagine una larghezza e un'altezza nel numero di pixel CSS o in una percentuale delle dimensioni effettive dell'immagine.

Questi esempi sono tutti validi:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
5

La larghezza e l'altezza dell'immagine devono essere specificate nei pixel CSS; un valore percentuale non è più un valore valido. Inoltre, se vengono specificati entrambi gli attributi, devono inserirsi in una delle tre formule che mantengono le proporzioni. Sebbene valido, non è necessario utilizzare gli attributi width e height per allungare un'immagine a una dimensione più grande.

Questi esempi sono validi:

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

Questo esempio non è raccomandato:

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

Questi esempi non sono validi:

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">