AspectRatio

A purely presentational component that locks a container's size to a specified aspect ratio, with preset ratio names (square/landscape/portrait/wide/ultrawide/golden) as well as fraction/decimal syntax: 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

Preset Ratio Names

The ratio attribute supports six preset tokens mapping common ratios (coexisting with fraction/decimal syntax; token names match first):

token	ratio	token	ratio
square	1 : 1	wide	16 : 9
landscape	4 : 3	ultrawide	21 : 9
portrait	3 : 4	golden	1.618 : 1

The six preset tokens

square 1:1

landscape 4:3

portrait 3:4

wide 16:9

ultrawide 21:9

golden 1.618:1

Example

Number Form

The ratio can also be assigned as a number property (el.ratio = 1.5), fully equivalent to the string form — binding a number via :ratio in Vue/React or assigning the property directly goes through the same parsing path.

Decimal / number property

ratio="1.5" (photo 3:2)

el.ratio = 1.5el.ratio = '16/9'el.ratio = 'golden'

number property assignment (click a button above)

Example

Inside a Flex Container

oas-aspect-ratio defaults to 100% width, but as a flex item inside a flex container it does not stretch to fill automatically — the height still derives from the ratio, while the width is decided by flex layout. To make it grow, give the host a flex property (e.g. flex: 1) or an explicit width.

Behavior inside a flex container

flex: 1

flex: 1

width 96px

Example

Note: without a width or flex property, the width of oas-aspect-ratio inside a flex container is decided by its content (and may collapse to 0 when empty) — always give the host a flex property or an explicit width.

Empty Content Placeholder

Keeps ratio without children (1:1)

Example

API

oas-aspect-ratio

Attributes

Attribute	Description	Type	Default
ratio	Aspect ratio: preset name square (1/1) / landscape (4/3) / portrait (3/4) / wide (16/9) / ultrawide (21/9) / golden (1.618/1), or a fraction 16/9, 4:3, 16 / 9, decimal 1.5; also assignable as a number property (el.ratio = 1.5). Token names match first; missing/invalid values (including zero numerator or denominator) fall back to 1 / 1 with a dev warning once per invalid value (deduplicated)	string | number	—

Slots

Name	Description
default	Content that keeps the aspect ratio

• 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.