Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLImageElement : propriété height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨juillet 2015⁩.

La propriété height de l'interface HTMLImageElement indique la hauteur à laquelle l'image est affichée, en pixels 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 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.

html
<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.

js
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

Specification
HTML
# dom-img-height-dev

Compatibilité des navigateurs

Voir aussi