Aspect Ratio Props

Name	Type	Default	Description
ratio	number	-	Width divided by height. 16 / 9 is a widescreen frame. Written to --astryx-aspect-ratio, not as an inline aspect-ratio.
shape	'rectangle' | 'ellipse'	'rectangle'	Container shape. Both shapes follow ratio. ellipse with ratio 1 is a circle.
fit	'cover' | 'contain' | 'center'	-	How the child fills the box. cover crops, contain letterboxes, center keeps the natural size. Omit it and the child sizes itself.

Slots

Name	Description
default	The content inside the ratio box. Pass one child when fit is set.

CSS variables

Name	Description
--astryx-aspect-ratio	The ratio. A stylesheet can override the variable or aspect-ratio itself.

Native attributes

AspectRatio renders a <div>.

The following go to that element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged. The root also sets data-shape.