Aspect Ratio

Displays content within a desired ratio.

Features

Accepts any custom ratio.

Installation

Install the component from your command line.

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

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

Anatomy

Import the component.

import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => <AspectRatio.Root />;

import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => <AspectRatio.Root />;

Basic example

Use the aspect ratio primitive.

import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => (
  <AspectRatio.Root>
    <img
      src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a"
      alt="mountain view"
      style={{ objectFit: 'cover', width: '100%', height: '100%' }}
    />
  </AspectRatio.Root>
);

import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => (
  <AspectRatio.Root>
    <img
      src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a"
      alt="mountain view"
      style={{ objectFit: 'cover', width: '100%', height: '100%' }}
    />
  </AspectRatio.Root>
);

API Reference

Root

Contains the content you want to constrain to a given ratio.

Prop	Type	Default	Required
`as`	`enum`	`div`
`ratio`	`number`	`1`

Examples

16 x 9 ratio

import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => (
  <AspectRatio.Root ratio={16 / 9}>
    <img
      src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a"
      alt="mountain view"
      style={{ objectFit: 'cover', width: '100%', height: '100%' }}
    />
  </AspectRatio.Root>
);

import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => (
  <AspectRatio.Root ratio={16 / 9}>
    <img
      src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a"
      alt="mountain view"
      style={{ objectFit: 'cover', width: '100%', height: '100%' }}
    />
  </AspectRatio.Root>
);