HTMLImageElement : propriété width

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.

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

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

Compatibilité des navigateurs

Voir aussi

• La propriété HTMLImageElement.height
• La propriété HTMLImageElement.naturalWidth
• La propriété HTMLCanvasElement.width
• La propriété HTMLEmbedElement.width
• La propriété HTMLIFrameElement.width
• La propriété HTMLObjectElement.width
• La propriété HTMLSourceElement.width
• La propriété HTMLVideoElement.width