HTMLSourceElement: width property

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2022.

See full compatibility
Learn more

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]