Balise <img>
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
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">
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2024/03/13 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2024/03/13 (UTC)."],[],[]]