# 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
 ## Common Ratios
4:3
1:1
21:9
 ## 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 |
square 1:1
landscape 4:3
portrait 3:4
wide 16:9
ultrawide 21:9
golden 1.618:1
 ## 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.
ratio="1.5" (photo 3:2)
 el.ratio = 1.5 el.ratio = '16/9' el.ratio = 'golden'
number property assignment (click a button above)
 ## 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.
flex: 1
flex: 1
width 96px
 > 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 ## 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.