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/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

How to import.
import Picture from "device-agnostic-ui/Picture.mjs";
With an SVG source.
import Picture from "device-agnostic-ui/Picture.mjs";

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/Picture.mjs";

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/Picture.mjs";

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/Picture.mjs";

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