Aspect Ratio

Constrains content to a fixed width-to-height ratio.

16 / 9

<script lang="ts">
  import { AspectRatio } from "$lib/components/ui/aspect-ratio";
</script>
 
<div class="w-full max-w-sm">
  <AspectRatio ratio={16 / 9}>
    <div
      class="flex size-full items-center justify-center rounded-3xl bg-(--text)/8 text-sm tracking-[-0.39px] text-(--text)/56"
    >
      16 / 9
    </div>
  </AspectRatio>
</div>

Installation

npx lily-svelte@latest add aspect-ratio

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the aspect-ratio source from the registry into `$lib/components/ui/aspect-ratio`.

Usage

<script lang="ts">
	import { AspectRatio } from '$lib/components/ui/aspect-ratio';
</script>
 
<AspectRatio ratio={16 / 9}>
	<img src="/cover.jpg" alt="Cover" class="size-full rounded-3xl object-cover" />
</AspectRatio>

← Alert Dialog Avatar →