Aspect Ratio

The Aspect Ratio component helps you maintain a consistent aspect ratio for content, particularly useful for responsive images, videos, and embedded content. It ensures that content maintains desired proportions across different screen sizes.

This component is built with React and styled using Tailwind CSS, offering predefined aspect ratio variants as well as support for custom ratios.

Installation

npx @tailgrids/cli add aspect-ratio

Anatomy

Import the component and pass the desired aspect ratio variant or custom ratio.

import { AspectRatio } from "@/registry/core/aspect-ratio";

export const AspectRatioExample = () => (
  <AspectRatio ratio="video" className="rounded-lg overflow-hidden">
    <img
      src="path/to/image.jpg"
      alt="Description"
      className="size-full object-cover"
    />
  </AspectRatio>
);

Examples

Variants

The AspectRatio component supports eight predefined Tailwind CSS aspect ratio variants: square (1:1), video (16:9), 4/3, 3/4, 21/9, 9/16, 3/2, and 2/3.

Custom Ratio

You can specify a custom aspect ratio using the customRatio prop, which accepts any numeric value (e.g., 2.35 for cinematic widescreen).

Note: The customRatio prop takes precedence over the ratio variant when both are provided.

Images

The AspectRatio component works seamlessly with responsive images. Use object-cover or object-contain classes to control how images fill the container.

PreviewCode

Light Theme

Copy to clipboard

16:9 Landscape

1:1 Square

API Reference

AspectRatio

Accessibility

• Semantic HTML: The component uses a standard <div> element that can be enhanced with ARIA attributes as needed.
• Image Alt Text: When using images, always provide descriptive alt text for screen readers.
• Focus Management: The component forwards refs, allowing you to manage focus programmatically when needed.
• Responsive Design: Aspect ratios are maintained across all screen sizes, ensuring consistent presentation for all users.