Aspect Ratio
Common ratio presets and overlay-content patterns with gradients, captions, and badges.
Aspect Ratio
Common ratios
AspectRatio constrains its child to a fixed width-to-height proportion regardless of the column it sits in. Pass ratio as a number — typically the width divided by the height. Pair with object-cover on images so they fill the frame without distorting.
1 / 1
4 / 3
16 / 9
3 / 2
21 / 9
9 / 16
3 / 4
2 / 3
With overlay content — gradients, captions, badges
Because AspectRatio is a positioned container, children with absolute positioning anchor relative to it. Common pattern: an image filling the frame, a gradient overlay for legibility, then text or a Badge pinned to a corner. Use inset-x-0 and start-*/end-* for RTL-safe positioning.
Marina Residences
AED 1,200,000
Saadiyat Villa
4 bed · 3,200 sqft
Downtown Studio
Abu Dhabi · AED 680K