> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Aspect Ratio

Displays content within a desired ratio.

## Features

- Accepts any custom ratio.

## Anatomy

Import the component.

```jsx
import { AspectRatio } from "@radix-solid/primitives";

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

## API Reference

### Root

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

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `ratio`The desired ratio                                                                                                                                                | `number`  | `1`     |