Aspect Ratio

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-ember/aspect-ratio
Copy

Usage#

Copyimport { AspectRatio } from '@/ui/aspect-ratio';

Copy<AspectRatio @ratio={{ratio}}>
  <img src="..." alt="Image" class="rounded-md object-cover" />
</AspectRatio>

Examples#

Square#

A square aspect ratio component using the @ratio={{1}} prop. This is useful for displaying images in a square format.

Portrait#

A portrait aspect ratio component using the @ratio={{ratio}} prop with 9/16. This is useful for displaying images in a portrait format.

API Reference#

AspectRatio#

The AspectRatio component displays content within a desired ratio.