Overview
Aspect Ratio displays content within a desired aspect ratio by automatically computing height based on the provided ratio and width.
Features
- Ensures content maintains a specific aspect ratio
- Accepts any custom ratio
Installation
npm install @radix-ui/react-aspect-ratio
Anatomy
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => (
<AspectRatio.Root>
<img src="..." alt="..." />
</AspectRatio.Root>
)
API Reference
Contains the content constrained to the given ratio.
The desired ratio. For example, 16/9 for a 16:9 aspect ratio.
Examples
Image with 16:9 Ratio
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => (
<div style={{ width: 300 }}>
<AspectRatio.Root ratio={16 / 9}>
<img
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b"
alt="Landscape"
style={{
objectFit: 'cover',
width: '100%',
height: '100%',
}}
/>
</AspectRatio.Root>
</div>
);
Square Ratio
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => (
<div style={{ width: 300 }}>
<AspectRatio.Root ratio={1}>
<img
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b"
alt="Square image"
style={{
objectFit: 'cover',
width: '100%',
height: '100%',
}}
/>
</AspectRatio.Root>
</div>
);
Video with 4:3 Ratio
import * as AspectRatio from '@radix-ui/react-aspect-ratio';
export default () => (
<div style={{ width: 500 }}>
<AspectRatio.Root ratio={4 / 3}>
<video
src="https://example.com/video.mp4"
controls
style={{
width: '100%',
height: '100%',
}}
/>
</AspectRatio.Root>
</div>
);
Use Cases
- Maintaining consistent image ratios in responsive layouts
- Embedding videos that maintain their aspect ratio
- Creating placeholder containers with specific ratios
- Building image galleries with consistent dimensions
