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. Direct img / video / picture children are stretched to fill the
box (object-fit: cover).
Installation
pnpm add @fluixi-ui/aspect-ratio
Usage
import { AspectRatio } from '@fluixi-ui/aspect-ratio';
<AspectRatio ratio={16 / 9}>
<img src="/cover.jpg" alt="" />
</AspectRatio>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio |
number |
1 |
The width-to-height ratio, e.g. 16 / 9. |
All other props (including class and style) are forwarded to the box.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.