HTMLSourceElement: width property

The width property of the HTMLSourceElement interface is a non-negative number indicating the width of the image resource in CSS pixels.

The property has an effect only if the parent of the current <source> element is a <picture> element.

It reflects the width attribute of the <source> element.

Value

A non-negative number indicating the width of the image resource in CSS pixels.

Examples

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 used when the browser does not support the 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)); // Output: [1000, 800, 600]