Aspect Ratio

Alert DialogAvatar

Keeps media at a fixed width-to-height ratio.

16 / 9

Installation

pnpm add krz-ui

Usage

import { AspectRatio } from "krz-ui";
<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="Cover" />
</AspectRatio>

API Reference

PropTypeDescription
rationumberWidth divided by height. Defaults to 1.
childrenReactNodeImages, videos and iframes fill the box.
className / style / ref—All go to the outer element. See Customization.