# Aspect Ratio

Keeps content at a fixed width-to-height ratio.

Group: Basics

## Import

```tsx
import { AspectRatio } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} maxW="sm">
      <Box bg="bg.muted" rounded="l2" display="flex" alignItems="center" justifyContent="center">
        <Text fontSize="sm" color="fg.muted">16:9</Text>
      </Box>
    </AspectRatio>
  )
}
```