HTMLImageElement : proprit width

Valeur

Une valeur entire indiquant la largeur de l'image. La faon dont la largeur est dfinie dpend du fait que l'image est rendue sur un support visuel ou non.

• Si l'image est affiche sur un support visuel, la largeur est exprime en pixels CSS.
• Sinon, la largeur correspond la largeur intrinsque de l'image, ajuste 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 dfinit 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 affiche 200px. Sinon, elle est affiche 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 proprit width pour obtenir la largeur de l'image. Il s'excute lors des vnements 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);

Rsultat

Vous pouvez aussi essayer cet exemple dans sa propre fentre.

Spcifications

Compatibilit des navigateurs

Voir aussi

• La proprit HTMLImageElement.height
• La proprit HTMLImageElement.naturalWidth
• La proprit HTMLCanvasElement.width
• La proprit HTMLEmbedElement.width
• La proprit HTMLIFrameElement.width
• La proprit HTMLObjectElement.width
• La proprit HTMLSourceElement.width
• La proprit HTMLVideoElement.width