Componente

Aspect ratio

Um contêiner que mantém os filhos numa proporção fixa de largura por altura, para que imagens, vídeos e embeds preservem o formato quando o layout se reorganiza.

Proporções

1 / 1

4 / 3

16 / 9

3 / 4

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbAspectRatioComponent } from '@herbst/ui';

@Component({
  selector: 'hb-demo-aspect-ratio-ratios',
  imports: [HbAspectRatioComponent],
  template: `
    <div class="grid w-full max-w-xl grid-cols-2 gap-4 sm:grid-cols-4">
      <div hb-aspect-ratio [hbRatio]="1" class="rounded-md border border-border bg-muted">
        <span class="flex items-center justify-center font-mono text-xs text-muted-foreground">
          1 / 1
        </span>
      </div>
      <div hb-aspect-ratio [hbRatio]="4 / 3" class="rounded-md border border-border bg-muted">
        <span class="flex items-center justify-center font-mono text-xs text-muted-foreground">
          4 / 3
        </span>
      </div>
      <div hb-aspect-ratio [hbRatio]="16 / 9" class="rounded-md border border-border bg-muted">
        <span class="flex items-center justify-center font-mono text-xs text-muted-foreground">
          16 / 9
        </span>
      </div>
      <div hb-aspect-ratio [hbRatio]="3 / 4" class="rounded-md border border-border bg-muted">
        <span class="flex items-center justify-center font-mono text-xs text-muted-foreground">
          3 / 4
        </span>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoAspectRatioRatiosComponent {}

Mídia (object-cover)

Referência de API

hb-aspect-ratio

Propriedade	Descrição	Tipo	Padrão
[hbRatio]	Largura dividida pela altura, ex. 16 / 9 ou 1 para um quadrado.	number	1
[class]	Classes CSS extras mescladas no host. Imagens e vídeos dentro usam object-cover.	string	''