Aspect Ratio
Displays content within a desired ratio.
import { Component } from '@angular/core';
import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm';
@Component({
selector: 'spartan-aspect-ratio-preview',
standalone: true,
imports: [HlmAspectRatioDirective],
template: `
<div class="overflow-hidden rounded-xl drop-shadow max-w-xl">
<div [hlmAspectRatio]="16 / 9">
<img alt="Mountain views" src="/mountains.jpg" />
</div>
</div>
`,
})
export class AspectRatioPreviewComponent {}Installation
npx nx g @spartan-ng/nx:ui aspectratio
Usage
import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm';<div class="overflow-hidden rounded-xl drop-shadow max-w-xl">
<div [hlmAspectRatio]="ratio">
<img alt="Mountain views" src="/mountains.jpg" />
</div>
</div>