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
eheight
: 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
eheight
potrebbe causare un rendering diverso dell'immagine. In molti casi, è possibile risolvere il problema aggiungendoheight: auto
owidth: 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">