HTMLSourceElement: height property
The height property of the HTMLSourceElement interface is a non-negative number indicating the height 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 height attribute of the <source> element.
Value
A non-negative number indicating the height 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> js
const img = document.getElementById("img"); const sources = img.querySelectorAll("source"); console.log(Array.from(sources).map((el) => el.height)); // Output: [400, 800, 800] Specifications
| Specification |
|---|
| HTML # dom-dim-height |