Aspect Ratio

Keeps media or other content inside a predictable width-to-height ratio.

Installation

bunx @swift-rust/ui add aspect-ratio

Usage

tsx

1import { AspectRatio } from "@/components/ui/aspect-ratio";
2 
3<AspectRatio ratio={class="text-amber-400">16 / class="text-amber-400">9}>
4  <img src="/cover.jpg" alt="Project cover" className="size-full object-cover" />
5</AspectRatio>

Examples

16 / 9

← Alert Dialog Avatar →