AspectRatio

Locks its child to a specific aspect ratio (16/9, 4/3, 1/1, anything you pass). The child fills 100% × 100% of the box via absolute positioning.

16/9

4/3

1/1

Usage

import { AspectRatio } from '@bwo-ui/react';

<AspectRatio ratio={16 / 9}>
  <img src="/hero.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</AspectRatio>

<AspectRatio ratio={1}>
  <Avatar />
</AspectRatio>

Props

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	width / height. Pass any number — 16/9, 4/3, 1.85, etc.