Aspect Ratio
Displays content within a desired ratio.
Preview
import { AspectRatio } from "@/components/ui/AspectRatio";
export function AspectRatioDemo() {
return (
<div className="w-[300px] overflow-hidden rounded-md">
<AspectRatio ratio={16 / 9}>
<img
className="size-full object-cover"
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
alt="Landscape photograph by Tobias Tullius"
/>
</AspectRatio>
</div>
)Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/aspect-ratioManual
Install the following dependencies:
pnpm install @radix-ui/react-aspect-ratioCopy and paste the AspectRatio component into your components/ui/AspectRatio.tsx file.
/**
* @description Displays content within a desired ratio.
*/
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
function AspectRatio({
...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
}
export { AspectRatio };Usage
AspectRatioDemo
export const AspectRatioDemo = () => (
<div className="w-[300px] overflow-hidden rounded-md">
<AspectRatio ratio={16 / 9}>
<img
className="size-full object-cover"
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
alt="Landscape photograph by Tobias Tullius"
/>
</AspectRatio>
</div>
)