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="(min-width: 1000px)"
width="1000"
height="400" />
<source
srcset="square.png"
media="(min-width: 800px)"
width="800"
height="800" />
<source
srcset="portrait.png"
media="(min-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>
js
const img = document.getElementById("img");
const sources = img.querySelectorAll("source");
console.log(Array.from(sources).map((el) => el.width)); // Output: [1000, 800, 600]
Specifications
Specification |
---|
HTML # dom-dim-width |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
width |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.