HTMLImageElement : propriété width
Baseline
Widely available
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.
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.
<p>
Largeur de l'image : <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
| Specification |
|---|
| HTML # dom-img-width-dev |
Compatibilité des navigateurs
Chargement…