Définir les attributs width et height sur les balises <img> permet d'éviter les changements de mise en page. Ces informations permettent au navigateur de réserver l'espace approprié pour l'image.
Définissez les attributs
widthetheight:les valeurs de ces attributs doivent être définies pour correspondre aux dimensions de l'image elle-même (c'est-à-dire à sa taille intrinsèque), et non aux dimensions dans lesquelles l'image sera affichée.Ajustez le style de l'image si nécessaire:en fonction du style existant de l'image, l'ajout d'attributs
widthetheightpeut entraîner un affichage différent de l'image. Dans de nombreux cas, ce problème peut être résolu en ajoutantheight: autoouwidth: autoau style existant.
| Style CSS précédent | Changer en |
|---|---|
| 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">