Aspect Ratio

A utility component for maintaining consistent aspect ratios with responsive designs for images, videos, and other media.

Introduction

The AspectRatio component is a utility that ensures consistent width-to-height proportions for responsive media like images, videos, or custom layouts. Built with @radix-ui/react-aspect-ratio, it provides a robust solution for maintaining proportional content in modern applications.

Common Aspect Ratio Examples

Square (1:1)

Standard (4:3)

Widescreen (16:9)

Content Card Example

Card with AspectRatio

Using aspect ratio ensures the image maintains the same proportions regardless of card width.

Installation

Install the AspectRatio component using the following command:

npx axionjs-ui add aspect-ratio

File Structure

aspect-ratio.tsx

Props

Prop	Type	Default
`ratio`	`number`	-
`children`	`React.ReactNode`	-
`className`	`string`	-

Common Aspect Ratios

Here are some commonly used aspect ratios for different content types:

Ratio	Decimal	Common Use Case
1:1	1	Social media profile pictures, album covers
4:3	1.33	Standard TV, older computer monitors
16:9	1.78	Widescreen TV, most modern videos
21:9	2.33	Ultrawide/cinematic format
3:2	1.5	Classic 35mm photography
2:3	0.67	Portrait photography, mobile screens
9:16	0.56	Vertical videos (TikTok, Instagram Stories)

When providing a ratio, use a simple division to calculate the decimal value. For example, a 16:9 ratio would be written as ratio={16/9}.

Usage Notes

When using the AspectRatio component:

Container Size: The parent element determines the width, while the height is calculated automatically based on the ratio.
Child Sizing: Child elements should use h-full w-full to fill the aspect ratio container.
Object Fit: Use object-cover or object-contain for images based on your needs.
Background Colors: Add a background color for better aesthetics while images load.

Example with best practices:

<AspectRatio ratio={16/9} className="bg-muted overflow-hidden">
  <img
    src="/path/to/image.jpg"
    alt="Descriptive alt text"
    className="h-full w-full object-cover rounded-md"
  />
</AspectRatio>

Features

The AspectRatio component provides the following features:

Dynamic Aspect Ratios:
Easily enforce consistent width-to-height ratios for images, videos, or custom content.
Responsive Design:
Ensures media scales proportionally across devices without manual adjustments.
Lightweight:
Built with @radix-ui/react-aspect-ratio for minimal overhead.
Versatile Content Support:
Works with images, videos, iframes, or any other HTML content.

Accessibility

The AspectRatio component ensures accessibility by:

Preserving Semantics:
Acts as a non-disruptive wrapper for its child content, allowing native roles and attributes to remain intact.
Keyboard and Screen Reader Support:
Works naturally with semantic children such as img or iframe.
Focus Management:
Ensures focusable child elements remain navigable and interactive.

When using iframes or videos, ensure you provide proper attributes like title for screen readers and allowFullScreen for user control.

Best Practices

Set a Background Color: Add a background color while images load to prevent layout shifts
Use Correct Aspect Ratios: Choose ratios that match your content’s intended display format
Combine with Container Queries: AspectRatio works great with container queries for responsive layouts
Consider Art Direction: Use different aspect ratios at different breakpoints if needed

Conclusion

The AspectRatio component simplifies responsive design by ensuring media like images and videos maintain their intended proportions. Lightweight and accessible, it’s the perfect utility for creating beautiful, proportional layouts across different screen sizes.