Aspect Ratio

Displays content within a desired ratio.

Docs

API Reference

Dependencies

@radix-ui/react-aspect-ratio: v1.1.0

Installation

Install the primitive

Install the @radix-ui/react-aspect-ratio package.

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

Copy-paste the component

Copy and paste the component code in a .tsx file.

'use client';
 
import { Root } from '@radix-ui/react-aspect-ratio';
 
/**
 * AspectRatio component that maintains a specified aspect ratio for its children.
 *
 * @param {React.ComponentPropsWithoutRef<typeof Root>} props - Additional props to pass to the aspect ratio container.
 *
 * @example
 * <AspectRatio ratio={16 / 9}>
 *     <Image src="..." alt="..." />
 * </AspectRatio>
 *
 * @see {@link https://dub.sh/ui-aspect-ratio Aspect Ratio Docs} for further information.
 */
export const AspectRatio = Root;

Update import paths

Update the @kosori/ui import paths to fit your project structure, for example, using ~/components/ui.

Usage

import Image from 'next/image';
 
import { AspectRatio } from '~/components/ui/aspect-ratio';

<div className='w-[450px]'>
  <AspectRatio ratio={16 / 9}>
    <Image src='...' alt='Image' className='rounded-md object-cover' />
  </AspectRatio>
</div>