Tag <img>

L'impostazione degli attributi width e height sui tag <img> contribuisce a evitare le variazioni del layout. Questa informazione consente al browser di riservare la quantità di spazio corretta per l'immagine.

  • Imposta gli attributi width e height: i valori di questi attributi devono essere impostati in modo che corrispondano alle dimensioni dell'immagine stessa (ovvero le dimensioni intrinseche), piuttosto che alle dimensioni con cui verrà visualizzata l'immagine.

  • Regola lo stile dell'immagine in base alle esigenze: a seconda dello stile esistente dell'immagine, l'aggiunta degli attributi width e height potrebbe causare un rendering diverso dell'immagine. In molti casi, è possibile risolvere il problema aggiungendo height: auto o width: auto allo stile esistente.

Stili CSS precedenti Cambia in
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">