Aspect Ratio component

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 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'

fit

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

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

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

Without preprocess Lapikit

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

API Reference

kit:aspect-ratio

props	type	description	default
is	enum	HTML element to render.	`'div'`
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.