Displays content within a desired ratio.
import React from 'react';
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
import './styles.css';
const AspectRatioDemo = () => (
<div className="Container">
<AspectRatio.Root ratio={16 / 9}>
<img
className="Image"
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
alt="Landscape photograph by Tobias Tullius"
/>
</AspectRatio.Root>
</div>
);
export default AspectRatioDemo;
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 />;
Contains the content you want to constrain to a given ratio.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
ratio | number | 1 |