#Aspect Ratio

A full-width box that keeps a set width-to-height ratio, for images and video.

#Installation

npx @blotch/dolan add aspect-ratio

import { UiAspectRatio } from '../components/ui/aspect-ratio';

#Usage

import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiAspectRatio } from '../components/ui/aspect-ratio';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiAspectRatio],
  template: `
    <ui-aspect-ratio [ratio]="16 / 9" class="rounded-lg">
      <image
        src="https://example.com/photo.jpg"
        mode="aspectFill"
        class="h-full w-full"
      />
    </ui-aspect-ratio>
  `,
})
export class App {}

• The box is as wide as its parent. Its height follows from ratio, which is width divided by height.
• Content that spills past the box is clipped (overflow-hidden).
• There's no automatic ratio from the image's own size. Lynx supports only explicit aspect-ratio values.
• Set mode on the <image>. CSS object-fit doesn't work on Lynx.

#Common ratios

<ui-aspect-ratio>…</ui-aspect-ratio>
<ui-aspect-ratio [ratio]="4 / 3">…</ui-aspect-ratio>
<ui-aspect-ratio [ratio]="9 / 16">…</ui-aspect-ratio>

The default 1 makes a square. 9 / 16 makes a tall box for portrait video.

#Narrower than the parent

<ui-aspect-ratio [ratio]="1" class="w-24">…</ui-aspect-ratio>

A width class replaces the default w-full, and the height follows.

#API

#UiAspectRatio

No outputs.

#Related

• <image>: show a picture inside the box
• Avatar: a round picture with a fallback
• Card