AspectRatio

A purely presentational component that locks a container's size to a specified aspect ratio: 100% width with height derived from the ratio, content filling the area and cropped to the ratio; with no children it still occupies space at the ratio. No events.

Basic Usage

16/9 video ratio

16:9

Example

Common Ratios

4:3 / 1:1 / 21:9

4:3

1:1

21:9

Example

Empty Content Placeholder

Keeps ratio without children (1:1)

Example

API

Attributes

Attribute	Description	Type	Default
ratio	Aspect ratio; supports 16/9, 4:3, 16 / 9, decimal 1.5; invalid values fall back to 1 / 1	string	—

Slots

Name	Description
default	—

• The host is 100% wide, with height derived from aspect-ratio; content fills the area via absolute inset: 0 and is cropped to the ratio.
• Without children, the host still occupies space at the ratio.
• No events; purely presentational.