Component
Aspect Ratio
Aspect Ratio
Displays content within a desired ratio.
Installation
Install the following dependencies
npm i @radix-ui/react-aspect-ratio
Copy and paste the following code into your project
components/ui/aspect-ratio/index.tsx
'use client'
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
import { styled } from '@shadow-panda/styled-system/jsx'
export const AspectRatio = styled(AspectRatioPrimitive.Root)
Update the import paths to match your project setup
Usage
import Image from 'next/image'
import { css } from '@shadow-panda/styled-system/css'
import { AspectRatio } from '@/components/ui/aspect-ratio'
<div className={css({ width: '450px' })}>
<AspectRatio ratio={16 / 9}>
<Image src="..." alt="..." className={css({ rounded: 'md', objectFit: 'cover' })} />
</AspectRatio>
</div>