# Aspect Ratio
> Displays content within a desired ratio.

## Import

```js
import { AspectRatio } from '@gemini-suite/vera-react';
```

## Background

Use **Aspect Ratio** to draw a rectangle, based on a given aspect ratio, and fluidly constrain a child element within it.
The child element will adapt to different screen dimensions, while also maintaining the specified aspect ratio.

## Examples

### Ratios

`AspectRatio` takes a ratio expression, like `4 / 3`.

```jsx resizable=true
<AutoGrid alignItems="start" min="10rem">
  <AspectRatio
    css={{
      backgroundColor: '$backgroundNeutralModerate'
    }}
  >
    <Box>1:1 (default)</Box>
  </AspectRatio>
  <AspectRatio
    ratio={4 / 3}
    css={{
      backgroundColor: '$backgroundNeutralModerate'
    }}
  >
    <Box>4:3</Box>
  </AspectRatio>
  <AspectRatio
    ratio={16 / 9}
    css={{
      backgroundColor: '$backgroundNeutralModerate'
    }}
  >
    <Box>16:9</Box>
  </AspectRatio>
</AutoGrid>
```

### With image

```jsx resizable=true
<Box
  css={{
    width: '100%',
    maxWidth: '25rem',
    mx: 'auto',
    overflow: 'hidden',
    borderRadius: '$xs',
    boxShadow: '$elevationS'
  }}
>
  <AspectRatio ratio={16 / 9}>
    <img
      src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&dpr=2&q=80"
      alt="Landscape photo"
    />
  </AspectRatio>
</Box>
```

---

## API Reference

| Name    | Type                                                      | Default | Description                                                                                                                                                                                                                                                                                  | Required |
| ------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`    | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`   | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`   | `StitchesCss`                                             |         | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |
| `ratio` | `number`                                                  |         | The desired aspect ratio.                                                                                                                                                                                                                                                                    |          |