Balise <img>

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 width et height: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 width et height peut entraîner un affichage différent de l'image. Dans de nombreux cas, ce problème peut être résolu en ajoutant height: auto ou width: auto au 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">