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>