Ethereal Garden

Aspect Ratio

Maintains a consistent width-to-height ratio for elements.

When To Use

  • When you need to display images, videos, or other media with a consistent aspect ratio
  • To prevent layout shifts as content loads
  • To create responsive UI elements that maintain their proportions across different screen sizes
  • When implementing image galleries or media carousels

Examples

Basic

The basic implementation maintains a 16/9 aspect ratio for an image.

With Different Ratios

You can customize the aspect ratio to suit different types of content.

For Video Content

Aspect ratios can be applied to video elements to maintain consistent sizing.

Accessibility

The Aspect Ratio component is a visual utility and doesn't introduce any specific accessibility considerations.

However, for optimal accessibility:

  • Ensure that images within the Aspect Ratio container have appropriate alt text
  • For videos, provide captions and transcripts when needed
  • Maintain sufficient color contrast for any text overlaid on media within the container

Props