Aspect ratio
@xui/aspect-ratioLocks content to a fixed width : height ratio. Give it a width; the height follows. Handy for images, video embeds and placeholder tiles.
Install
pnpm add @xui/aspect-ratio Add the barrel to a standalone component's imports:
import { XuiAspectRatioImports } from '@xui/aspect-ratio';
@Component({
imports: [XuiAspectRatioImports],
// …
})Examples
Ratios
Loading preview…
<div class="flex flex-wrap gap-6">
@for (r of ratios; track r; let i = $index) {
<div class="w-56">
<xui-aspect-ratio [ratio]="r" class="bg-surface-inset border-border rounded-lg border">
<div class="text-foreground-muted flex items-center justify-center text-sm">{{ labels[i] }}</div>
</xui-aspect-ratio>
</div>
}
</div>With image
Loading preview…
<div class="w-72">
<xui-aspect-ratio [ratio]="16 / 9" class="border-border rounded-lg border">
<img src="https://picsum.photos/640/360" alt="Sample" />
</xui-aspect-ratio>
</div>API
Locks its content to a fixed width : height ratio, so media and embeds keep their shape as the column resizes. Give it a width (the default is 100%); the height follows from the ratio.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''rationumberWidth divided by height, e.g. 16 / 9 or 1.1