8.0k New

Aspect Ratio

Previous Next

Displays content within a desired ratio.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor
Placeholder
<script lang="ts">
  import { AspectRatio } from "$lib/components/ui/aspect-ratio/index.js";
</script>
 
<div class="w-full max-w-sm">
  <AspectRatio ratio={16 / 9} class="rounded-lg bg-muted">
    <img
      src="https://avatar.vercel.sh/shadcn1"
      alt="Placeholder"
      class="size-full rounded-lg object-cover grayscale dark:brightness-20"
    />
  </AspectRatio>
</div>

Installation 

pnpm dlx shadcn-svelte@latest add aspect-ratio

Usage 

<script lang="ts">
  import { AspectRatio } from "$lib/components/ui/aspect-ratio/index.js";
</script>
<AspectRatio ratio={16 / 9}>
  <img src="..." alt="Image" class="rounded-md object-cover" />
</AspectRatio>

Square

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

Placeholder
<script lang="ts">
  import { AspectRatio } from "$lib/components/ui/aspect-ratio/index.js";
</script>
 
<div class="w-full max-w-[12rem]">
  <AspectRatio ratio={1 / 1} class="rounded-lg bg-muted">
    <img
      src="https://avatar.vercel.sh/shadcn1"
      alt="Placeholder"
      class="size-full rounded-lg object-cover grayscale dark:brightness-20"
    />
  </AspectRatio>
</div>

Portrait

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

Placeholder
<script lang="ts">
  import { AspectRatio } from "$lib/components/ui/aspect-ratio/index.js";
</script>
 
<div class="w-full max-w-[10rem]">
  <AspectRatio ratio={9 / 16} class="rounded-lg bg-muted">
    <img
      src="https://avatar.vercel.sh/shadcn1"
      alt="Placeholder"
      class="size-full rounded-lg object-cover grayscale dark:brightness-20"
    />
  </AspectRatio>
</div>