Primitives

Aspect Ratio

A container that keeps its content at a fixed width-to-height ratio.

forty-cdk/aspect-ratio

Resize the preview and watch the frame hold its 16 / 9 ratio. The primitive writes the ratio and nothing else, so every border, colour and inset below is your own CSS.

Source

16 / 9

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ForAspectRatio } from 'forty-cdk/aspect-ratio';

@Component({
  selector: 'app-aspect-ratio-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForAspectRatio],
  template: `
    <div forAspectRatio class="box" [ratio]="16 / 9">
      <span class="label">16 / 9</span>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .box {
      width: min(340px, 100%);
      display: grid;
      place-items: center;
      border-radius: var(--ex-radius, 22px);
      corner-shape: squircle;
      overflow: hidden;
      color: #fff;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: 0.02em;
      background: linear-gradient(135deg, var(--ex-accent, #0e7c6b), #ec4899);
    }

    .label {
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.25);
    }
  `,
})
export class AspectRatioDefaultExample {}

It is a pure visual utility that locks an element's box via the native CSS aspect-ratio property, with no ARIA semantics. Reach for it to reserve space for media before it loads (preventing layout shift), keep cards on a grid uniform, or wrap responsive iframes.

Why this exists

You don't need this primitive for a fixed, never-changing ratio, which is one line of CSS:

.box {
  aspect-ratio: 16 / 9;
}

[forAspectRatio] earns its place when the ratio is dynamic or must be validated. It is more than the static declaration:

Reactive ratio input. Bind [ratio]="ratio()" and the host style recomputes as the value changes, with no manual style writes.
Invalid-value guarding. 0, negative, and non-finite ratios fall back to 1, so a bad computed value never emits invalid CSS.
SSR-safe. The aspect-ratio style is bound declaratively (never touched imperatively), so it renders identically on the server and hydrates cleanly.
Consistent headless API. Same shape as the other primitives, so it composes the same way.

If your ratio is a literal constant, prefer the CSS property directly and keep the bundle leaner. Import [forAspectRatio] when reactivity or validation buys you something.

Anatomy

<div forAspectRatio [ratio]="16 / 9">
  <!-- your content fills the box -->
</div>

Examples

Square (1 / 1)

Set ratio to 1 to keep a box perfectly square at any width. That is handy for avatars, thumbnails, or uniform grid cards.

Source

1 / 1

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ForAspectRatio } from 'forty-cdk/aspect-ratio';

@Component({
  selector: 'app-aspect-ratio-square-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForAspectRatio],
  template: `
    <div forAspectRatio class="box" [ratio]="1">
      <span class="label">1 / 1</span>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .box {
      width: min(240px, 100%);
      display: grid;
      place-items: center;
      border-radius: var(--ex-radius, 22px);
      corner-shape: squircle;
      overflow: hidden;
      color: #fff;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: 0.02em;
      background: linear-gradient(135deg, #0ea5e9, #22c55e);
    }

    .label {
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.25);
    }
  `,
})
export class AspectRatioSquareExample {}

API

`ForAspectRatio`

Property	Type	Description
`ratio`	`input`	Width / height ratio (e.g. `16 / 9`, `4 / 3`, `1`). Accepts both numeric expressions and string attributes. Non-positive or non-finite values fall back to `1`. Default: `1`

Data attribute	Values
`[forAspectRatio]`	present

Styling

forty-cdk ships no styles: put your own class on the host rather than styling the for* selector (Styling forty-cdk explains why). This primitive is purely structural: its only host effect is the native aspect-ratio style, so it reflects no data-* attributes and writes no CSS custom properties.

Behavior notes

Browser support. Native aspect-ratio is in Baseline 2021 (Chrome 88+, Firefox 89+, Safari 15+), so no polyfill is needed on any browser Angular itself supports.
Width still on you. The directive only sets aspect-ratio; you decide width / max-width / display. The height is computed from the ratio.
Children fill the box. Use width: 100%; height: 100%; object-fit: cover on inner media to fill without distortion. The directive imposes no styles on children.
No role, no a11y. This is a layout utility. The element it sits on keeps whatever semantics you give it (<div>, <figure>, <a>, …).