# @askrjs/themes/aspect-ratio

> Published API exports for @askrjs/themes/aspect-ratio.

Source: [https://askrjs.com/docs/reference/api/themes/aspect-ratio](https://askrjs.com/docs/reference/api/themes/aspect-ratio)

Status: stable. Packages: @askrjs/themes/aspect-ratio.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 3 exports from the declarations shipped by @askrjs/themes.

### `AspectRatio`

```ts
AspectRatio: { (props: AspectRatioProps): JSX.Element; (props: AspectRatioAsChildProps): JSX.Element; }
```

Constrains its content to a fixed width/height ratio (defaults to `1`)
using a computed `aspect-ratio` style, rendering as a `<div>` or, with
`asChild`, merging its layout into the single child element.

### `AspectRatioAsChildProps`

```ts
AspectRatioAsChildProps: AspectRatioOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link AspectRatio } rendered with `asChild`, merging layout onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ratio`: ratio?: string | number | undefined;

- `ref`: ref?: Ref<unknown>;

- `style`: style?: unknown;

### `AspectRatioProps`

```ts
AspectRatioProps: Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & AspectRatioOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}
```

Props for {@link AspectRatio } rendered as its default `<div>` element.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ratio`: ratio?: string | number | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `style`: style?: unknown;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/alert/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/avatar/index.md)