Active development has been paused. Read the announcement.

Aspect Ratio

Displays content within a desired ratio.

Landscape photograph by Tobias Tullius
<script lang="ts">
	import { AspectRatio } from 'radix-svelte';
	import type { ResolvedProps } from 'radix-svelte/internal/helpers';

	let rootRatio: number = 1.75;
</script>

<div class="w-[300px] overflow-hidden rounded-md shadow-lg">
	<AspectRatio.Root ratio={rootRatio}>
		<img
			class="h-full w-full object-cover"
			src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
			alt="Landscape photograph by Tobias Tullius"
		/>
	</AspectRatio.Root>
</div>

API Reference

Root

Props
ratio
number
Inspired by Radix UI
Not affiliated with Radix UI or WorkOS.