Ivorie

Aspect Ratio

Keeps content at a fixed width-to-height ratio.

import { … } from '@inlaylab/ivorie/aspect-ratio'
16 / 9 
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvAspectRatio } from '@inlaylab/ivorie/aspect-ratio';

@Component({
  selector: 'demo-aspect-ratio',
  imports: [IvAspectRatio],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-aspect-ratio [ratio]="16 / 9" class="bg-muted w-full max-w-sm overflow-hidden rounded-lg">
      <div class="from-primary/20 to-primary/60 text-primary-foreground flex size-full items-center justify-center bg-linear-to-br text-sm font-medium">
        16 / 9
      </div>
    </iv-aspect-ratio>
  `,
})
export default class AspectRatioDemo {}

Installation

CLInpm
npx ivorie add aspect-ratio

Use it for images, videos and maps that must keep their shape as the width changes.

Usage

import { IvAspectRatio } from '@inlaylab/ivorie/aspect-ratio';
<iv-aspect-ratio [ratio]="16 / 9">
  <img src="photo.jpg" alt="Photo" class="size-full object-cover" />
</iv-aspect-ratio>

Examples

Square

1 / 1
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvAspectRatio } from '@inlaylab/ivorie/aspect-ratio';

@Component({
  selector: 'demo-aspect-ratio-square',
  imports: [IvAspectRatio],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-aspect-ratio ratio="1" class="bg-muted w-48 rounded-lg">
      <div class="text-muted-foreground flex size-full items-center justify-center text-sm">1 / 1</div>
    </iv-aspect-ratio>
  `,
})
export default class AspectRatioSquareDemo {}

API

Every part also accepts class.

iv-aspect-ratio

Name Type Default Description
ratio number 1 Width divided by height.

Accessibility

No role. Give images inside it an alt.

Notes

  • It uses the CSS aspect-ratio property. Children fill it with size-full.