Netzo Logo

aspect-ratio

Displays content within a desired ratio.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import { AspectRatio } from 'netzo/components/aspect-ratio.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { AspectRatio } from "netzo/components/aspect-ratio.tsx";

export default () => {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <img
        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>
  );
};