Svelte 5 component · fractalsvelte-ui · Display

AspectRatio

A responsive container that locks embedded media to a fixed aspect ratio like 16:9, 4:3, or 1:1. Ensures consistent proportional scaling across screen dimensions without layout shifts.

All components Source

Install

AspectRatio is a Svelte 5 aspect ratio component in @fractaldesign/fractalsvelte-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/fractalsvelte-ui

Import

import

import { AspectRatio } from '@fractaldesign/fractalsvelte-ui';

Usage

Example

<AspectRatio ratio={'16/9'}>Click me</AspectRatio>

Props

Also accepts every attribute of HTMLAttributes, spread onto the root element.

Name	Type	Default
`ratio`	`AspectRatioValue`	`'16/9'`
`class`	`string`	`''`

Snippets

Name	Type	Default
`children`	`Snippet`	`—`

Source

Show the AspectRatio.svelte source

AspectRatio.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';

	export type AspectRatioValue =
		| '16/9'
		| '4/3'
		| '1/1'
		| '21/9'
		| '9/16'
		| '3/2'
		| number;

	interface Props extends HTMLAttributes<HTMLDivElement> {
		ratio?: AspectRatioValue;
		class?: string;
		children?: Snippet;
	}

	let {
		ratio = '16/9',
		class: className = '',
		children,
		...restProps
	}: Props = $props();

	const ratioCss = $derived(
		typeof ratio === 'number' ? `${ratio}` : ratio.replace(':', '/')
	);
</script>

<div
	class="f-aspect-ratio {className}"
	style="aspect-ratio: {ratioCss};"
	{...restProps}
>
	{#if children}
		{@render children()}
	{/if}
</div>

<style>
	@layer fractalsvelte-ui.components {
		.f-aspect-ratio {
			position: relative;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
		}

		.f-aspect-ratio > :global(*) {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
</style>

Avatar A visual representation of an entity, user profile, or workspace.AvatarGroup A stacked container that clusters related avatars with consistent overlapping margins and elevation borders.Badge A compact status indicator pill used to highlight counts, states, or tags.Banner A full-width announcement strip intended for global notices, system maintenance alerts, and calls to action.Counter An animated rolling number odometer counter with vertical digit reels that slide smoothly into position upon…DotMatrix A retro LED dot-matrix display rendering alphanumeric text on a 5x7 phosphor grid with authentic glow, pitch…