AspectRatio

[axAspectRatio] constrains its host to a fixed width-to-height ratio. It sets the modern aspect-ratio CSS property (via Renderer2, SSR-safe), so any ratio works.

Import

import { AxAspectRatioDirective } from '@axisui-ng/primitives';

Usage

<!-- 16:9 video wrapper (the default) -->
<div [axAspectRatio]="16 / 9">
  <iframe src="…"></iframe>
</div>

<!-- square -->
<div [axAspectRatio]="1">
  <img src="/cover.jpg" alt="Cover" />
</div>

Inputs

Input	Type	Default	Notes
`axAspectRatio`	`number`	`16 / 9`	Width ÷ height ratio (selector and input share this name).

Accessibility

Presentational only; provide proper alt/labels on the media inside it.

Storybook

Interactive examples live in Storybook under Primitives / AspectRatio. Run pnpm storybook to explore them.