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.
Hoe dit werk
Hoekom ons gebruik?
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