Displays content within a desired ratio.
import Image from "next/image";
import { AspectRatio } from "@/lib/components/core/default/aspect-ratio";
function AspectRatioDemo() {
return (
<AspectRatio ratio={16 / 9}>
<Image
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
fill
className="rounded-md object-cover"
/>
</AspectRatio>
);
}
Installation
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 };
Update the import paths to match your project setup.
Usage
Use the AspectRatio component to display content within a desired ratio.
Options
AsChild
Use the asChild prop to change the default rendered element for the one passed as a child, merging their props and behavior.
import Image from "next/image";
import { AspectRatio } from "@/lib/components/core/default/aspect-ratio";
function AspectRatioDemo() {
return (
<AspectRatio ratio={16 / 9} asChild>
<Image
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
fill
className="rounded-md object-cover"
/>
</AspectRatio>
);
}
API Reference
| Prop | Type | Default | Description |
|---|
asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ratio | number | 1 | The desired ratio |
