HTMLImageElement : propriété height

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 en pixels 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é par naturalHeight.

Exemples

Dans cet exemple, deux tailles différentes sont proposées pour une image d'horloge à l'aide de l'attribut srcset. L'une fait 200px de large et l'autre 400px. De plus, l'attribut sizes 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 class="size">?</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 exemple dans une nouvelle fenêtre.

Spécifications

Compatibilité des navigateurs

Voir aussi

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