AspectRatio Component

Table of Contents

Usage

Cillum laborum consequat cupidatat Lorem sint sit veniam nulla nulla occaecat ea deserunt cupidatat duis. Magna minim pariatur adipisicing ullamco nulla laborum nulla id sunt ad. Quis aliqua officia duis aliquip ipsum dolore labore non.

Default Ratio (4x3)

4x3
<script>
  import { AspectRatio } from "$lib/components";
</script>

<AspectRatio>4x3</AspectRatio>

Ratio 1x1

1x1
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 4x3

4x3
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 3x2

3x2
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 16x9

16x9
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 2x1

2x1
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 21x9

21x9
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 3x4

3x4
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 2x3

2x3
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 9x16

9x16
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 1x2

1x2
<script>
  import { AspectRatio } from "$lib/components";
</script>

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

Ratio 9x21

9x21
<script>
  import { AspectRatio } from "$lib/components";
</script>

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