La propriétéheight de l'interfaceHTMLImageElement indique la hauteur à laquelle l'image est affichée, enpixels CSS si l'image est affichée ou rendue sur un support visuel tel qu'un écran ou une imprimante ; sinon, il s'agit de la hauteur naturelle de l'image, corrigée de la densité de pixels.

Valeur

Une valeur entière indiquant la hauteur de l'image. L'unité dans laquelle la hauteur est définie dépend du fait que l'image est affichée sur un support visuel ou non.

• Si l'image est affichée sur un support visuel tel qu'un écran ou une imprimante, la hauteur est exprimée enpixels CSS.
• Sinon, la hauteur de l'image est représentée par sa hauteur naturelle (intrinsèque), ajustée selon la densité d'affichage comme indiqué parnaturalHeight.

Exemples

Dans cet exemple, deux tailles différentes sont proposées pour une image d'horloge à l'aide de l'attributsrcset. L'une fait 200px de large et l'autre 400px. De plus, l'attributsizes est utilisé pour spécifier la largeur à laquelle l'image doit être affichée selon la largeur de la zone d'affichage (viewport en anglais).

HTML

Concrètement, pour les zones d'affichage jusqu'à 400px de large, l'image est affichée à une largeur de 200px ; sinon, elle est affichée à 300px.

<p>Image height: <span>?</span>px (resize to update)</p><img  src="/fr/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"  alt="Horloge"  srcset="    /fr/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,    /fr/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w  "  sizes="(width <= 400px) 200px, 300px" />

JavaScript

Le code JavaScript ci-dessous lit la propriétéheight pour déterminer la hauteur de l'image selon la largeur à laquelle elle est actuellement affichée.

const clockImage = document.querySelector("img");let output = document.querySelector(".size");const updateHeight = () => {  output.innerText = clockImage.height;};updateHeight();window.addEventListener("resize", updateHeight);

Résultat

Vous pouvez aussi essayer cet exempledans une nouvelle fenêtre.

Spécifications

Compatibilité des navigateurs

Voir aussi

• HTMLCanvasElement.height
• HTMLEmbedElement.height
• HTMLIFrameElement.height
• HTMLObjectElement.height
• HTMLSourceElement.height
• HTMLVideoElement.height