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é width

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é width de l'interface HTMLImageElement indique la largeur à laquelle une image est affichée en pixels CSS si elle est rendue sur un support visuel (écran ou imprimante). Sinon, il s'agit de la largeur intrinsèque de l'image, corrigée selon la densité de pixels.

Valeur

Un entier qui indique la largeur de l'image.

  • Si l'image est affichée sur un support visuel, la largeur est exprimée en pixels CSS.
  • Sinon, la largeur correspond à la largeur intrinsèque de l'image, ajustée selon la densité d'affichage (voir naturalWidth).

Exemples

Dans cet exemple, deux tailles sont fournies pour une image d'horloge avec l'attribut srcset : 200px et 400px. L'attribut sizes définit la largeur d'affichage selon la largeur de la zone d'affichage (viewport).

HTML

Pour une zone d'affichage jusqu'à 400px de large, l'image est affichée à 200px. Sinon, elle est affichée à 400px.

html
<p>
  Largeur de l'image&nbsp;: <span class="size">?</span>px (redimensionnez pour
  mettre à jour)
</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, 400px" />

JavaScript

Le code suivant lit la propriété width pour obtenir la largeur de l'image. Il s'exécute lors des événements load et resize afin d'afficher la largeur actuelle.

js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateWidth = () => {
  output.innerText = clockImage.width;
};

updateWidth();
window.addEventListener("resize", updateWidth);

Résultat

Vous pouvez aussi essayer cet exemple dans sa propre fenêtre.

Spécifications

Specification
HTML
# dom-img-width-dev

Compatibilité des navigateurs

Voir aussi