Aspect Ratio

<Description>Displays content within a desired ratio.</Description>

<Highlights features={["Accepts any custom ratio."]} />

Installation

Install the component from your command line.

npm install @radix-ui/react-aspect-ratio

Anatomy

Import the component.

import { AspectRatio } from "radix-ui";

export default () => <AspectRatio.Root />;

API Reference

Root

Contains the content you want to constrain to a given ratio.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "ratio",
		type: "number",
		default: "1",
		description: "The desired ratio",
	},
]}

/>