Aspect Ratio
Displays content within a desired ratio.
Overview
The Aspect Ratio component helps maintain consistent width-to-height ratios across different screen sizes. It's particularly useful for responsive images, videos, maps, and other media content that needs to maintain specific proportions.
Examples
Image with Aspect Ratio
Video with Aspect Ratio
Maintain consistent video dimensions with the ratio prop.
Map with Aspect Ratio
Use a different ratio (4:3) for map embeds.
API Reference
The AspectRatio component maintains a consistent width-to-height ratio for its content.
| Component | Props | Description |
|---|---|---|
| AspectRatio | ratio: number className?: string children: React.ReactNode | A container component that maintains a specified aspect ratio for its content. |
The AspectRatio component accepts standard HTML attributes in addition to the props listed above.
Usage Guidelines
Follow these guidelines for effective use of the AspectRatio component:
Layout and Structure
Do
- Place AspectRatio components within responsive containers
- Use consistent aspect ratios for similar content types
- Consider the viewport size when choosing container widths
- Maintain proper spacing around AspectRatio components
- Use in card layouts, hero sections, and galleries for consistency
Don't
- Use AspectRatio without a defined container width
- Place AspectRatio components directly in flex containers without width constraints
- Nest AspectRatio components within other AspectRatio components
- Use inconsistent aspect ratios for the same type of content
- Overcrowd layouts with too many AspectRatio components
Content Organization
Do
- Group similar content with consistent aspect ratios
- Use AspectRatio to create visual harmony in content grids
- Pair with appropriate typography and spacing for balanced layouts
- Consider content hierarchy when choosing aspect ratios
- Use for featured content that needs visual emphasis
Don't
- Mix different aspect ratios in a single content grid
- Use for content where the full height needs to be visible
- Apply to text-heavy content that should expand with its content
- Use for interactive elements that need flexible dimensions
- Force content into inappropriate aspect ratios that cause important details to be cropped
Common Ratios
16:9
Standard widescreen ratio, ideal for videos and presentations.
16:9
ratio={16 / 9}
4:3
Traditional TV and monitor ratio, good for maps and older content.
4:3
ratio={4 / 3}
1:1
Square ratio, perfect for profile pictures and thumbnails.
1:1
ratio={1 / 1}
Accessibility
When using the AspectRatio component, ensure your content remains accessible to all users.
Alt Text
Always provide descriptive alt text for images within AspectRatio components to ensure screen reader users understand the content.
Iframe Titles
When using iframes for videos or maps, always include a descriptive title attribute for screen reader accessibility.
Accessibility Tip
For videos, ensure controls are enabled and consider providing captions or transcripts for users who are deaf or hard of hearing.