AspectRatio

Importing

import { AspectRatio } from '@customerio/pluma-components/react';

Usage

AspectRatio constrains its content to a fixed width-to-height ratio. It fills the width of its container and derives its height from the ratio prop, making it useful for responsive images, video embeds, maps, and placeholders.

The single child stretches to fill the container.

Ratio

The ratio prop accepts a number expressed as width / height. For example, 16 / 9 produces a widescreen container, 1 a square, and 3 / 4 a portrait. When omitted, it defaults to 1.

Media

Images and videos placed inside AspectRatio are stretched to fill the container and use object-fit: cover, so they crop rather than distort.

<AspectRatio ratio={16 / 9}>
  <img src="/photo.jpg" alt="" />
</AspectRatio>

Limiting the size

AspectRatio fills the width of its container, so constrain the container (for example with the style prop) to limit its overall size.