Picture

A picture with a responsive width and proportionate height, even while loading.

It implements the <picture> element.

It’s displayed as a block and tends to take up 100% of the available space unless an inline style width is set.

Props

width

TypeNumber (required)

The picture’s ratio width; typically it’s intrinsic pixel width.

height

TypeNumber (required)

The picture’s ratio height; typically it’s intrinsic pixel height.

Examples

With an SVG source.
import { Picture } from 'device-agnostic-ui'

<Picture width={157} height={100} style={{ width: '157px' }}>
  <img
    src="/static/example-picture/example.svg"
    alt="Device Agnostic UI logo."
  />
</Picture>
Device Agnostic UI logo.
Round, with a background color. A width and height of 1 results in a square ratio.
import { Picture } from 'device-agnostic-ui'

<Picture width={1} height={1} style={{ width: '6rem' }}>
  <img
    src="/static/example-picture/example.svg"
    alt="Device Agnostic UI logo."
    style={{
      borderRadius: '50%',
      objectFit: 'contain',
      backgroundColor: 'gold'
    }}
  />
</Picture>
Device Agnostic UI logo.
With WebP and PNG sources.
import { Picture } from 'device-agnostic-ui'

<Picture width={628} height={400} style={{ width: '157px' }}>
  <source
    type="image/webp"
    srcSet="/static/example-picture/example.webp"
  />
  <img
    src="/static/example-picture/example.png"
    alt="Device Agnostic UI logo."
  />
</Picture>
Device Agnostic UI logo.
With separate light and dark mode WebP and PNG sources.
import { Picture } from 'device-agnostic-ui'

<Picture width={1360} height={560} style={{ width: '340px' }}>
  <source
    type="image/webp"
    srcSet="/static/screenshots/Button-dark.webp"
    media="(prefers-color-scheme: dark)"
  />
  <source
    type="image/png"
    srcSet="/static/screenshots/Button-dark.png"
    media="(prefers-color-scheme: dark)"
  />
  <source
    type="image/webp"
    srcSet="/static/screenshots/Button-light.webp"
  />
  <img
    src="/static/screenshots/Button-light.png"
    alt="Button component screenshot"
  />
</Picture>
Button component screenshot