Ember UI LogoEmber UI
Components

Aspect Ratio

A aspect-ratio component

Preview

Loading...
import Image from "next/image";import { AspectRatio } from "@/registry/axon/ui/aspect-ratio";export default function AspectRatioDemo() {  return (    <AspectRatio className="rounded-lg bg-muted" ratio={16 / 9}>      <Image        alt="Photo by Drew Beamer"        className="mt-0 mb-0 h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"        fill        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"      />    </AspectRatio>  );}

Installation

CLI

npx shadcn@latest add @emberui/aspect-ratio
yarn shadcn@latest add @emberui/aspect-ratio
pnpm dlx shadcn@latest add @emberui/aspect-ratio
bunx --bun shadcn@latest add @emberui/aspect-ratio

Reference

This component is based on the shadcn/ui Aspect Ratio component.

On this page