Lapikit

Aspect ratio component

Aspect ratio

The AspectRatio 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

the office the office tv moroccan christmas

Examples of aspect ratio

Base

This example shows a simple use of the AspectRatio component with a defined ratio. This ensures that the element retains its proportions, whatever its size.

AspectRatio

The aspect ratio is defined by the aspectRatio property. For example, a ratio of 16/9 is ideal for videos, while a ratio of 4/3 is better suited to other types of content. If no ratio is specified, a default behavior is applied.

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.

API Reference

props	type	description	default
ref $bindable	HTMLElement	Direct access to DOM element	undefined
aspectRatio	string	Defines the element’s aspect ratio (e.g. “16:9”, “4:3”).	undefined
inline	boolean	Indicates whether the element should be displayed in inline mode (in the text flow)	false

Use Aspect Ratio on Icon to visually structure your media components in a Card.