Aspect Ratio Calculator — Responsive Design Dimensions
Calculate missing dimensions from aspect ratios with our Aspect Ratio Calculator. Generate CSS code for responsive media with modern aspect-ratio property or legacy padding-bottom technique. Perfect for responsive images, video embeds, and layout design with common presets like 16:9, 4:3, 21:9, and more.
Features
- Calculate missing width or height from aspect ratio
- Common ratio presets (16:9, 4:3, 21:9, 1:1, etc.)
- CSS padding-bottom trick generator
- Multiple ratio formats (ratio, decimal, percentage)
- Responsive image size calculator
- Real-time calculation
- 100% client-side processing
Common Aspect Ratios
- 16:9 — Standard HD video, YouTube, modern displays
- 4:3 — Classic TV, older monitors
- 21:9 — Ultrawide monitors, cinematic
- 1:1 — Square (Instagram posts)
- 9:16 — Vertical video (Instagram Stories, TikTok)
Common Use Cases
- Responsive Images: Maintain aspect ratio while scaling images
- Video Embeds: Calculate iframe dimensions for YouTube, Vimeo
- CSS Aspect Ratio: Generate padding-bottom trick for older browsers
- Image Resizing: Calculate crop or resize dimensions
- Layout Design: Plan responsive grid layouts
CSS Aspect Ratio Techniques
Modern approach (CSS aspect-ratio):
.container { aspect-ratio: 16 / 9; width: 100%;
}Legacy approach (padding-bottom trick):
.container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}
.container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Useful Resources
Wikipedia: Aspect Ratio Beginner-friendly introduction to aspect ratios in images and video
MDN: CSS aspect-ratio Property Modern CSS property for maintaining aspect ratios
Smashing Magazine: Aspect Ratio in CSS Comprehensive guide to maintaining aspect ratios in modern CSS
W3C CSS Box Sizing Module Official specification for CSS aspect-ratio
New Aspect-Ratio CSS Property Google web.dev guide to modern aspect ratio handling