HTMLSourceElement : propriété width - Les API Web | MDN

HTMLSourceElement : propriété width

La propriété width de l'interface HTMLSourceElement est un nombre positif ou nul indiquant la largeur de la ressource image en pixels CSS.

Cette propriété n'a d'effet que si le parent de l'élément HTML <source> courant est un élément HTML <picture>.

Elle reflète l'attribut width de l'élément <source>.

Valeur

Un nombre positif ou nul indiquant la largeur de la ressource image en pixels CSS.

Exemples

html

<picture id="img">
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image utilisée lorsque le navigateur ne prend pas en charge les sources"
    width="500"
    height="400" />
</picture>

const img = document.getElementById("img");
const sources = img.querySelectorAll("source");
console.log(Array.from(sources).map((el) => el.width)); // Affiche : [1000, 800, 600]