Aspect ratio

Layout primitive that pins a container to a target aspect ratio via the modern aspect-ratio property and the --kc-ratio custom property. No !important — same tier as a flex or grid primitive, not an override utility.

How it works

.ratio is the wrapper: position: relative, width: 100%, aspect-ratio: var(--kc-ratio, 1). The default ratio is 1 (square).
Children of .ratio are absolutely positioned and stretched edge to edge, so an <iframe>, <img>, <video>, or <canvas> fills the box regardless of its intrinsic dimensions.
Preset modifiers set --kc-ratio to a literal value:
- .ratio-1x1 → 1 / 1
- .ratio-4x3 → 4 / 3
- .ratio-16x9 → 16 / 9
- .ratio-21x9 → 21 / 9
For one-off ratios, set --kc-ratio inline (style="--kc-ratio: 3 / 2") — no class needed.
Although the helper ships without !important, every utility in the same directory (object-fit, overflow, font-size, line-height) does use !important. This is the intentional layout-primitive exception.

Live

Preset ratios

Live

1×1

4×3

16×9

21×9

HTML

<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;">
<div class="ratio ratio-1x1" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); display: flex; align-items: center; justify-content: center;"><span>1×1</span></div>
<div class="ratio ratio-4x3" style="background: var(--kc-success-bg); color: var(--kc-success-fg); display: flex; align-items: center; justify-content: center;"><span>4×3</span></div>
<div class="ratio ratio-16x9" style="background: var(--kc-warning-bg); color: var(--kc-warning-fg); display: flex; align-items: center; justify-content: center;"><span>16×9</span></div>
<div class="ratio ratio-21x9" style="background: var(--kc-danger-bg); color: var(--kc-danger-fg); display: flex; align-items: center; justify-content: center;"><span>21×9</span></div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-ratio')
);

Playground

Arbitrary ratio via inline --kc-ratio

Live

3 / 2 — no class

HTML

<div class="ratio" style="--kc-ratio: 3 / 2; max-width: 20rem; background: var(--kc-default-bg); color: var(--kc-default-fg); border: 1px solid currentColor;">
<div style="display: flex; align-items: center; justify-content: center;">3 / 2 — no class</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-ratio')
);

Playground

Markup

<!-- 16:9 video embed -->
<div class="ratio ratio-16x9">
  <iframe src="https://example.com/embed/abc" title="Demo" allowfullscreen></iframe>
</div>

<!-- Square thumbnail -->
<div class="ratio ratio-1x1">
  <img src="/cover.jpg" alt="" />
</div>

<!-- Arbitrary ratio via inline custom property — no class needed -->
<div class="ratio" style="--kc-ratio: 3 / 2;">
  <img src="/photo.jpg" alt="" />
</div>

Variables

Variable	Default	Notes
`$selector`	`'.ratio'`	Wrapper class. Override to rebrand under your own prefix (e.g. `'.aspect'`).
`$variant-selector-prefix`	`'.ratio-'`	Prefix prepended to each `$ratios` key. Override independently of `$selector` if you want a different shape for the variants (e.g. `'.is-ratio-'`).
`$ratios`	`(1x1: '1 / 1', 4x3: '4 / 3', 16x9: '16 / 9', 21x9: '21 / 9')`	Each entry emits a `<prefix><key>` class that sets `--kc-ratio`. Pass an empty map to ship only the bare wrapper and rely on inline overrides.

Override example

@use '@adnap/krysalicss/helper/ratio' with (
  // Trim the preset list or add bespoke ratios:
  $ratios: (
    1x1:    '1 / 1',
    4x3:    '4 / 3',
    16x9:   '16 / 9',
    21x9:   '21 / 9',
    3x2:    '3 / 2',  // add your own
    golden: '1.618 / 1',
  ),
);

Tokens consumed

Token	Used for
`--kc-ratio`	Read by `.ratio` on its `aspect-ratio` declaration. Set per-instance (inline style, scoped rule) or via a preset modifier. Falls back to `1` when unset.