Components / Aspect Ratio
Aspect Ratio
Layout primitive that constrains its slotted child (image, video, embed) to a fixed aspect ratio. Use the `fit` prop to control how the child fills the box (cover crops, contain letterboxes, etc.).
layout v0.7.0
Playground
Examples
16:9 video frame
<cg-aspect-ratio ratio="16/9" style="max-width:480px;"><img src="https://picsum.photos/480/270" alt="16:9" /></cg-aspect-ratio>Square avatar
<cg-aspect-ratio ratio="1/1" style="max-width:200px;border-radius:9999px;overflow:hidden;"><img src="https://picsum.photos/200" alt="Avatar" /></cg-aspect-ratio>Portrait fit=contain (letterboxed logo)
<cg-aspect-ratio ratio="3/4" fit="contain" style="max-width:240px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;"><img src="https://picsum.photos/240/240" alt="Logo" /></cg-aspect-ratio>Import
import { CgAspectRatio } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-aspect-ratio';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | string | "16/9" | Aspect ratio expressed as W/H (e.g. "16/9", "1/1", "4/3") |
fit | "cover" | "contain" | "fill" | "none" | "scale-down" | "cover" | How the slotted element fills the box (object-fit) |