Aspect Ratio
The proportional relationship between an element's width and height.
Plain English
Aspect ratio is the rule that keeps images and videos the right shape regardless of screen size. Without it, images either stretch distortedly or collapse to zero height when their container resizes. Setting a fixed aspect ratio means "always stay this shape" — 16:9 for widescreen, 1:1 for square, 4:3 for classic photo — and the element scales perfectly in any context.
Technical
The modern approach is the CSS aspect-ratio property (e.g. aspect-ratio: 16/9). Older techniques used the "padding-top hack" — setting padding-top as a percentage on a 0-height container because padding percentages are based on width. For images, object-fit: cover or contain controls how the image fills the aspect-ratio box. Works on any block or replaced element.
Live Demo
1:1
Profile image
16:9
Video thumbnail
4:3
Classic photo
9:16
Mobile story
Aspect ratio locks width-to-height proportion regardless of container size.
Usage
✓ Good usage
Set aspect-ratio: 16/9 on video thumbnails and aspect-ratio: 1 on product images so the grid stays perfectly uniform regardless of the source image dimensions.
✗ Bad usage
Letting images render at their natural dimensions in a card grid — different source sizes produce wildly uneven card heights that destroy the grid rhythm.
Recommended values
- 1 / 1 — square thumbnails, avatars, product images
- 16 / 9 — video, hero images, landscape photography
- 4 / 3 — traditional photo format, blog post images
- 3 / 2 — magazine-style editorial images
- 2 / 3 — portrait / vertical card format
- 21 / 9 — ultrawide hero banners
Common mistakes
- Not combining aspect-ratio with object-fit: cover — the image fills the box but may stretch distortedly without object-fit.
- Using aspect-ratio on inline elements — convert to block or inline-block first.
- Forgetting that aspect-ratio is overridden by explicit height values.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Give all product card images aspect-ratio: 1 with object-fit: cover and overflow: hidden. Use aspect-ratio: 16/9 for video thumbnails. Keep all images uniform regardless of source dimensions.