Aspect Ratio

Displays content within a desired ratio.

Radix UIAPI Reference
Photo by Alvaro Pinot

Installation

  1. Install the @radix-ui/react-aspect-ratio component from radix-ui:
npm install @radix-ui/react-aspect-ratio
  1. Copy and paste the following code into your project.
"use client"
 
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
const AspectRatio = AspectRatioPrimitive.Root
 
export { AspectRatio }

This is the <AspectRatio /> primitive. You can place it in a file at components/ui/aspect-ratio.tsx.

Usage

import Image from "next/image"
 
import { AspectRatio } from "@/components/ui/aspect-ratio"
<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image
      src="https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80"
      alt="Photo by Alvaro Pinot"
      fill
      className="rounded-md object-cover"
    />
  </AspectRatio>
</div>
Alert DialogAvatar