Aspect Ratio

Constrains a container to a specific aspect ratio. Media children fill the container automatically.

Presets

square

video

photo

wide

portrait

Base

Class	Description
`.ui-aspect-ratio`	Base class

Ratio

Class	Value
`.ui-aspect-ratio--square`	square
`.ui-aspect-ratio--video`	video
`.ui-aspect-ratio--photo`	photo
`.ui-aspect-ratio--wide`	wide
`.ui-aspect-ratio--portrait`	portrait

With Media

img (video)

img (square)

<div class="ui-row ui-row--md">
  <div class="ui-aspect-ratio ui-aspect-ratio--video demo-swatch" style="--demo-w: 240px">
    <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">img (video)</div>
  </div>
  <div class="ui-aspect-ratio ui-aspect-ratio--square demo-swatch" style="--demo-w: 240px">
    <div style="inline-size: 100%; block-size: 100%; background: var(--ui-color-primary); color: var(--ui-color-on-primary); display: grid; place-items: center">img (square)</div>
  </div>
</div>

Custom Ratio

2.35:1 (cinemascope)

<div class="ui-aspect-ratio" style="--ui-aspect-ratio: 2.35 / 1; inline-size: 320px; background: var(--ui-color-bg-muted)">
  <span class="ui-p-2">2.35:1 (cinemascope)</span>
</div>