Aspect Ratio

Name: FivUI
Author: Fivex Labs

Displays content within a desired ratio.

tsx

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
  )
}

Installation

CLI

bash

npx fivui add aspect-ratio

Manual

Copy and paste the following code into your project.

bash

npm install @radix-ui/react-aspect-ratio

components/ui/aspect-ratio.tsx

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }

Usage

tsx

import { AspectRatio } from "@/components/ui/aspect-ratio"

tsx

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="object-cover w-full h-full" />
</AspectRatio>

Examples

16:9 Ratio

tsx

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatio16By9() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
  )
}

4:3 Ratio

tsx

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatio4By3() {
  return (
    <AspectRatio ratio={4 / 3}>
      <img
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800&dpr=2&q=80"
        alt="Photo by Spacejoy"
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
  )
}

1:1 Ratio (Square)

tsx

import { AspectRatio } from "@/components/ui/aspect-ratio"

export function AspectRatioSquare() {
  return (
    <AspectRatio ratio={1 / 1}>
      <img
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&dpr=2&q=80"
        alt="Photo by Tom Crew"
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
  )
}

API Reference

AspectRatio

Prop	Type	Default	Description
`ratio`	`number`	`1`	The desired ratio (width / height)

AspectRatio inherits all props from Radix UI AspectRatio primitive.

View Radix Docs