@fluixi-ui/aspect-ratio

Constrain content to a fixed width-to-height ratio.

A headless box that fills the available width and derives its height from a ratio, via the CSS aspect-ratio property. Ideal for images, video, maps, and embeds.

import { AspectRatio } from '@fluixi-ui/aspect-ratio';

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

• ratio — the width-to-height ratio (e.g. 16 / 9). Defaults to 1 (square).

Direct img/video/picture children are stretched to fill the box (object-fit: cover). All other props (including class and style) are forwarded.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.