Aspect ratio

Constrain content to a fixed ratio.

16 / 9

import { BuiAspectRatio } from 'ng-blatui';

<bui-aspect-ratio ratio="16 / 9" class="bg-muted rounded-lg">
  <div class="flex h-full w-full items-center justify-center">16 / 9</div>
</bui-aspect-ratio>

Image

<bui-aspect-ratio ratio="16 / 9">
  <img src="/cover.jpg" alt="" class="size-full rounded-lg object-cover" />
</bui-aspect-ratio>

Ratios

1 / 1

4 / 3

16 / 9

3 / 4

@for (r of ['1 / 1', '4 / 3', '16 / 9', '3 / 4']; track r) {
  <bui-aspect-ratio [ratio]="r" class="bg-muted rounded-lg">{{ r }}</bui-aspect-ratio>
}

API reference

Inputs

Prop	Type	Default	Description
`ratio`	`string`	`'1 / 1'`	Aspect ratio for the content, as a CSS `aspect-ratio` value (e.g. `16 / 9`).

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.