AspectRatio

layout

Displays content within a desired ratio, preventing layout shifts.

Preview
16 / 9

Installation

npm install @launchapp/design-system
Import
import { AspectRatio } from "@launchapp/design-system";

Examples

16:9 Aspect Ratio

<div className="w-[300px]">  <AspectRatio ratio={16 / 9}>    <img      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800"      alt="Photo"      className="rounded-md object-cover w-full h-full"    />  </AspectRatio></div>

Props

PropTypeDefaultDescription
ratio
number1The desired ratio (width/height). E.g. 16/9.
← PreviousAlertDialog
Next →Avatar