Active development has been paused. Read the
		announcement.
  Aspect Ratio
Displays content within a desired ratio.
<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
PropTypeControl / Value Props 
   number        
 ratio