Aspect Ratio

Displays content within a desired ratio.

16:9

21:9

1:1

9:16

<script lang="ts">
  import { Example, ExampleWrapper } from '$registry/bases/base/components/example';
  import { AspectRatio } from '$registry/bases/base/ui/aspect-ratio';

  const examples = [
    { title: '16:9', ratio: 16 / 9, class: 'items-center justify-center' },
    { title: '21:9', ratio: 21 / 9, class: 'items-center justify-center' },
    { title: '1:1', ratio: 1 / 1, class: 'items-start' },
    { title: '9:16', ratio: 9 / 16, class: 'items-center justify-center' },
  ];
</script>

<ExampleWrapper class="max-w-4xl 2xl:max-w-4xl">
  {#each examples as example (example.title)}
    <Example title={example.title} class={example.class}>
      <AspectRatio ratio={example.ratio} class="rounded-lg bg-muted style-luma:rounded-3xl">
        <!-- svelte-ignore a11y_img_redundant_alt -->
        <img
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          style="position: absolute; inset: 0;"
          class="h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl"
        />
      </AspectRatio>
    </Example>
  {/each}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn class-variance-authority

Copy the component

Copy the following files into src/lib/components/ui/aspect-ratio.

src/lib/components/ui/aspect-ratio/AspectRatio.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { ratio, children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> & { ratio: number } = $props();
</script>
<div data-slot="aspect-ratio" {...props} style:--ratio={ratio} class={cn('relative aspect-(--ratio)', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/aspect-ratio/index.ts

import type { ComponentProps } from 'svelte';
import AspectRatio from './AspectRatio.svelte';
export { AspectRatio };
export type AspectRatioProps = ComponentProps<typeof AspectRatio>;

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { AspectRatio } from '$lib/components/ui/aspect-ratio';
</script>

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="A mountain lake" class="rounded-md object-cover" />
</AspectRatio>