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="(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.height)); // Output: [400, 800, 800]

Specifications

Specification
HTML Standard
# dom-dim-height

Browser compatibility

BCD tables only load in the browser

See also