HTMLImageElement : propriété width

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis 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.

Dans cet article

Valeur

Une valeur entière indiquant la largeur de l'image. La façon dont la largeur est définie dépend du fait que l'image est rendue sur un support visuel ou non.

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);