# Aspect Ratio
URL: /react/components/aspect-ratio
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/aspect-ratio.mdx

가로(width)가 정해지면 비율에 따라 세로(height)가 자동으로 결정되는 레이아웃 컨테이너입니다.

사용 가능 버전: @seed-design/react@1.2.0, @seed-design/css@1.2.0

## Preview

```tsx
import { AspectRatio, Text, VStack } from "@seed-design/react";

export default function AspectRatioPreview() {
  return (
    <VStack gap="x4">
      <AspectRatio ratio={4 / 3} width="160px" bg="palette.gray100">
        <Text color="palette.gray700">4 / 3</Text>
      </AspectRatio>
      <AspectRatio ratio={1} width="160px" bg="palette.gray100">
        <Text color="palette.gray700">1:1</Text>
      </AspectRatio>
      <AspectRatio ratio={16 / 9} width="160px" bg="palette.gray100">
        <Text color="palette.gray700">16 / 9</Text>
      </AspectRatio>
    </VStack>
  );
}
```

## Usage

```tsx
import { AspectRatio } from "@seed-design/react";
```

```tsx
<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." />
</AspectRatio>
```

## Props

## Examples

### Ratio

다양한 비율을 지정할 수 있습니다. `1`은 정사각형, `4/3`은 일반적인 사진 비율, `16/9`는 와이드스크린 비율입니다.

```tsx
import { AspectRatio, Box, HStack } from "@seed-design/react";

export default function AspectRatioRatio() {
  return (
    <HStack gap="x4">
      <Box width="150px">
        <AspectRatio ratio={1}>
          <img src="https://picsum.photos/seed/square/400/400" alt="1:1 Square" />
        </AspectRatio>
      </Box>
      <Box width="150px">
        <AspectRatio ratio={4 / 3}>
          <img src="https://picsum.photos/seed/4-3/400/300" alt="4:3" />
        </AspectRatio>
      </Box>
      <Box width="150px">
        <AspectRatio ratio={16 / 9}>
          <img src="https://picsum.photos/seed/16-9/400/225" alt="16:9" />
        </AspectRatio>
      </Box>
    </HStack>
  );
}
```