Aspect Ratio

Displays content within a desired ratio.

default.tsx

<AspectRatio ratio={16 / 9}>
  <Image />
</AspectRatio>

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx dotui-cli@latest add aspect-ratio

Use the AspectRatio component to display content within a desired ratio.

Use the asChild prop to change the default rendered element for the one passed as a child, merging their props and behavior.

as-child.tsx

<AspectRatio ratio={16 / 9} asChild>
  <Image />
</AspectRatio>

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`ratio`	`number`	`1`	The desired ratio

Last updated on 10/11/2024