Vui Starter
npm

Aspect Ratio

Aspect Ratio locks its content to a fixed width-to-height ratio, such as 16:9.

API Reference
16 / 9

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/aspect-ratio.

Usage

Constrain any child (image, video, embed) to a fixed ratio.

aspect-ratio-demo.tsx
import { AspectRatio } from "@viliha/vui-ui/aspect-ratio";

export function Example() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img src="/cover.jpg" alt="" className="size-full rounded-lg object-cover" />
    </AspectRatio>
  );
}