Aspect Ratio
shadcn/ui
Maintains a fixed width-to-height ratio regardless of container width. Essential for image and video previews.
@/components/ui/aspect-ratioCommon ratios — previews
16:9
16:9
4:3
4:3
1:1
1:1
Common ratios — reference
| ratio prop | Label | Usage |
|---|---|---|
| 16 / 9 | 16:9 | Video previews, screen recordings, hero images |
| 4 / 3 | 4:3 | Legacy screenshots, document previews |
| 3 / 2 | 3:2 | Photography, standard landscape images |
| 1 / 1 | 1:1 | Avatars, thumbnails, square attachments |
| 21 / 9 | 21:9 | Ultra-wide banners, cinematic crops |
| 2 / 3 | 2:3 | Portrait photos, mobile screenshots |
In context — ticket attachment grid
Attachments
4
IMAGE
Login bug
screenshot-login.png
PDF
May report
report-may.pdf
IMAGE
Profile
profile-photo.jpg
IMAGE
Mobile view
mobile-screenshot.png
Each card uses its natural aspect ratio — portrait screenshots don't get cropped into landscape boxes.
Props
| Prop | Type | Description |
|---|---|---|
| ratio | number | Width divided by height — e.g. 16/9 = 1.777, 1 = square |
| className | string | Applied to the inner div — use for bg, flex, items-center to center content |
The parent container controls the width — AspectRatio only controls height relative to that width. Always give the parent an explicit width or let it be constrained by a grid/flex column.
On this page