Aspect Ratio
Utilities for controlling the aspect ratio of an element.
On this page
layout/aspect_ratio_basic
The live demo is not available for this example.
aspect_ratio_basic.dart
View source
// 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#
| Class | Ratio | Description |
|---|---|---|
aspect-auto |
null |
Default behavior (no ratio) |
aspect-square |
1 / 1 |
Square (1:1) |
aspect-video |
16 / 9 |
Standard video (16:9) |
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]')
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.