Aspect Ratio

Displays content within a desired ratio.

Features

  • Accepts any custom ratio.

Install the component from your command line.

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

Import the component.

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

Use the aspect ratio primitive.

mountain view
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>
);

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

PropTypeDefault
asenumdiv
rationumber1
mountain view
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>
);