<script>
  import { AspectRatio, Tile } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

The `AspectRatio` component maintains consistent proportions for content across different screen sizes. It's particularly useful for images, videos, and other media that need to preserve their aspect ratio when resizing.

Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.

## Default

Display a 2:1 aspect ratio container by default.

<AspectRatio>
  2x1
</AspectRatio>

## Ratio 2x3

<AspectRatio ratio="2x3">
  2x3
</AspectRatio>

## Ratio 16x9

<AspectRatio ratio="16x9">
  16x9
</AspectRatio>

## Ratio 4x3

<AspectRatio ratio="4x3">
  4x3
</AspectRatio>

## Ratio 1x1

<AspectRatio ratio="1x1">
  1x1
</AspectRatio>

## Ratio 3x4

<AspectRatio ratio="3x4">
  3x4
</AspectRatio>

## Ratio 3x2

<AspectRatio ratio="3x2">
  3x2
</AspectRatio>

## Ratio 9x16

<AspectRatio ratio="9x16">
  9x16
</AspectRatio>

## Ratio 1x2

<AspectRatio ratio="1x2">
  1x2
</AspectRatio>

## Tile (16x9)

<AspectRatio ratio="16x9">
  <Tile style="height: 100%">Content</Tile>
</AspectRatio>