Aspect Ratio

Holds a box at a fixed width-to-height ratio whatever its width — a cover image, a video frame, a chart that must not stretch.

tsx

1import { AspectRatio } from "@pestoui/core"

Ratios

ratio is width over height. The box fills its parent's width, so the parent decides how large it gets.

Prop	Type	Default	Description
ratio	number	1	Width divided by height — 16 / 9, 4 / 3, 1.
children	ReactNode	—	Fills the box. Give an image object-cover and size-full.
className	string	—	On the box that holds the ratio.

Pesto UI · 117 documented components