AspectRatio.svx

<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"`.

## Ratio 2x1

The default aspect ratio is `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>

## Custom tag

By default, the `AspectRatio` component renders a `div` element. You can change this by specifying a `tag`.

<AspectRatio tag="h1" ratio="16x9">
  Content
</AspectRatio>

## Tile (16x9)

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