Calculate Ratios for Responsive Design
Find the correct height for responsive images and containers given a fixed width and target ratio.
Common dimensions
Responsive tips
Responsive containers need a known aspect ratio to maintain layout. Enter your container width and ratio to get the exact height needed.
The CSS padding-top trick: padding-top: 56.25% gives a 16:9 container. Calculate your ratio as (h/w Γ 100)% to get the right percentage.
Modern CSS: aspect-ratio: 16/9 works in all modern browsers. Use the simplified ratio output from this tool directly in CSS.
For <img> tags, always specify width and height attributes matching the image's natural ratio. Prevents layout shift (CLS) as images load.
How It Works
Why use ours?
Also check outβ¦
Calculate Aspect Ratios for Video
Find the correct dimensions for 16:9, 4:3, 9:16 an
Calculate Dimensions for Social Media
Get exact pixel dimensions for Instagram, Twitter,
Calculate Image Dimensions for Web
Ensure images fit their containers perfectly β fin
Calculate Print Dimensions
Convert print sizes between different aspect ratio