Aspect Ratio
Displays content within a desired ratio.
import { Component } from '@angular/core';
import { HlmAspectRatio } from '@spartan-ng/helm/aspect-ratio';
@Component({
selector: 'spartan-aspect-ratio-preview',
imports: [HlmAspectRatio],
template: `
<div class="max-w-xl overflow-hidden rounded-xl drop-shadow">
<div [hlmAspectRatio]="16 / 9">
<img alt="Mountain views" src="/assets/mountains.jpg" />
</div>
</div>
`,
})
export class AspectRatioPreview {}Installation
npx nx g @spartan-ng/cli:ui aspectratio
ng g @spartan-ng/cli:ui aspectratio
Usage
import { HlmAspectRatio } from '@spartan-ng/helm/aspect-ratio';<div class="max-w-xl overflow-hidden rounded-xl drop-shadow">
<div [hlmAspectRatio]="ratio">
<img alt="Mountain views" src="/mountains.jpg" />
</div>
</div>Helm API
Mock
Selector: hlm-mock
HlmAspectRatio
Selector: [hlmAspectRatio]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| hlmAspectRatio | number | 1 | Aspect ratio of the element, defined as width / height. |
| class | ClassValue | - | - |