Components

Aspect Ratio component

On this page

The kit:aspect-ratio component maintains a constant aspect ratio for an element, whatever its content. It is particularly useful for videos, images or any other content requiring a proportional layout. Thanks to its flexible options, it can be easily integrated into different design contexts

<kit:aspect-ratio ratio="16/9">
	<img src="https://picsum.photos/seed/lapikit/800/450" alt="A scenic landscape" />
</kit:aspect-ratio>

kit:aspect-ratio sets aspect-ratio on the container and stretches child media elements (img, video, iframe, canvas, svg) to fill it via object-fit. The ratio prop accepts a number, a /-separated string ("16/9"), or a :-separated string ("16:9"). It falls back to 16/9 if the value is invalid.

aspectRatio is an alias for ratio both are equivalent.

Examples of aspect ratio

ratio

Pass ratio as a string ("16/9", "4:3") or a plain number (1.777).

ratio: string | number = '16/9'
aspectRatio: string | number = '16/9'

<div
	style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; align-items: start;"
>
	{#each [['16/9', 'alpine'], ['4/3', 'forest'], ['1/1', 'city'], ['9/16', 'portrait']] as [r, seed] (r)}
		<div>
			<kit:aspect-ratio ratio={r}>
				<img src="https://picsum.photos/seed/{seed}/400/400" alt="" />
			</kit:aspect-ratio>
			<p style="text-align: center; font-size: 0.8rem; margin-top: 0.375rem; opacity: 0.6;">{r}</p>
		</div>
	{/each}
</div>

fit

fit controls the object-fit applied to child media elements.

fit: 'cover' | 'contain' | 'fill' = 'cover'

<div
	style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: start;"
>
	{#each ['cover', 'contain', 'fill'] as f (f)}
		<div>
			<kit:aspect-ratio ratio="1/1" fit={f}>
				<img src="https://picsum.photos/seed/lapikit/800/450" alt="" />
			</kit:aspect-ratio>
			<p style="text-align: center; font-size: 0.8rem; margin-top: 0.375rem; opacity: 0.6;">{f}</p>
		</div>
	{/each}
</div>

inline

The inline property displays the component in the text flow, as an inline element. This can be useful for integrating proportional elements into paragraphs or blocks of text. Width is no longer 100% set it manually via style.

inline: boolean = false

<p>
	Inline usage sits inside text flow:
	<kit:aspect-ratio ratio="1/1" inline style="width: 3rem; vertical-align: middle;">
		<img src="https://picsum.photos/seed/lapikit/100/100" alt="" style="border-radius: 50%;" />
	</kit:aspect-ratio>
	and continues alongside content.
</p>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

import { AspectRatio } from 'lapikit/components';

API Reference

kit:aspect-ratio

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render.	`'div'`
s-class	enum	Sets className on aspect-ratio.
s-style	enum	Sets styles on aspect-ratio.
ratio	`string \| number`	Aspect ratio. Accepts `"w/h"`, `"w:h"`, or a number.	`16/9`
aspectRatio	`string \| number`	Alias for `ratio`.	`16/9`
fit	enum	`object-fit` applied to child media elements.	`'cover'`
inline	`boolean`	Renders as `inline-block` with `width: auto`.	`false`
children	`Snippet`	Content to constrain.

Use kit:aspect-ratio on Icon to visually structure your media components in a Card.