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

The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.

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

### Default (2x1)

<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>