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

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
height
Chrome – Full support
Chrome 90 (Release date: 2021-04-13)
footnote Full support
Edge – Full support
Edge 90 (Release date: 2021-04-15)
footnote Full support
Firefox – Full support
Firefox 108 (Release date: 2022-12-13)
footnote Full support
Opera – Full support
Opera 76 (Release date: 2021-04-28)
footnote Full support
Safari – Full support
Safari 15 (Release date: 2021-09-20)
footnote Full support
Chrome Android – Full support
Chrome Android 90 (Release date: 2021-04-13)
footnote Full support
Firefox for Android – Full support
Firefox for Android 108 (Release date: 2022-12-13)
footnote Full support
Opera Android – Full support
Opera Android 64 (Release date: 2021-05-25)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15 (Release date: 2021-09-20)
footnote Full support
Samsung Internet – Full support
Samsung Internet 15 (Release date: 2021-08-13)
footnote Full support
WebView Android – Full support
WebView Android 90 (Release date: 2021-04-13)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15 (Release date: 2021-09-20)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also