Aspect Ratio

Utilities for controlling the aspect ratio of an element.

• Basic Usage
• Quick Reference
• Variants
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

// Basic examples showing the syntax
WDiv(className: 'aspect-square')
WDiv(className: 'aspect-video')

Basic Usage

Use aspect-{ratio} to set the preferred aspect ratio of an element. This is particularly useful for images, video players, or ensuring consistent card sizing.

Video (16:9)

Use aspect-video to force a 16:9 ratio, perfect for video content.

WDiv(
  className: 'w-full aspect-video bg-black',
  child: WText('Video Placeholder', className: 'text-white'),
)

Square (1:1)

Use aspect-square to create a perfect square, regardless of width.

WDiv(
  className: 'w-1/2 aspect-square bg-blue-500',
)

Auto

Use aspect-auto to remove any applied aspect ratio constraints.

WDiv(className: 'aspect-auto')

Quick Reference

Variants

Wind supports standard state variants for aspect ratios.

// Change aspect ratio on hover
WDiv(className: 'aspect-square hover:aspect-video transition-all')

Responsive Design

Apply different aspect ratios at different breakpoints using standard responsive prefixes.

// Square on mobile, Video on desktop
WDiv(className: 'aspect-square md:aspect-video')

Dark Mode

While less common for layout structure, you can conditionally apply aspect ratios in dark mode.

WDiv(className: 'aspect-square dark:aspect-video')

Arbitrary Values

Use the bracket syntax aspect-[w/h] to apply any specific aspect ratio that isn't included in the default theme.

// 4:3 ratio (Classic TV)
WDiv(className: 'aspect-[4/3]')

// 21:9 ratio (Ultrawide)
WDiv(className: 'aspect-[21/9]')

[!NOTE] Arbitrary values must use the format width/height where both are numbers (e.g., [4/3], [16/10]).

Customizing Theme

Currently, the aspect ratio scale is hardcoded to standard Tailwind defaults (auto, square, video) and cannot be extended via WindThemeData.

To use custom ratios, we recommend using Arbitrary Values or creating a custom parser if you need named utilities for specific ratios.

Related Documentation

• Sizing
• Display