Aspect Ratio

Displays content within a desired ratio.

bun x bosia@latest add aspect-ratio

Displays content within a desired ratio using the CSS padding-bottom technique.

Preview

16:9

1:1

Square content

Props

Prop	Type	Default
`ratio`	`number`	`16 / 9`

Usage

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

<AspectRatio ratio={16 / 9} class="overflow-hidden rounded-lg bg-muted">
	<img src="/my-image.jpg" alt="Landscape" class="h-full w-full object-cover" />
</AspectRatio>

Square

<AspectRatio ratio={1} class="overflow-hidden rounded-lg bg-muted">
	<div class="flex h-full w-full items-center justify-center">Square content</div>
</AspectRatio>