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.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Picture.css';

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

Deep import.
import Picture from 'device-agnostic-ui/public/components/Picture.js';
Deep require.
const Picture = require('device-agnostic-ui/public/components/Picture');
Index import. Convenient, but technically inferior to a deep import.
import { Picture } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Picture } = require('device-agnostic-ui');
With an SVG source.
import { Picture } from 'device-agnostic-ui';

const result = (
  <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';

const result = (
  <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';

const result = (
  <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';

const result = (
  <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