Aspect Ratio
Calculate width and height for common aspect ratios like 16:9, with live preview and CSS snippets.
About this tool
About
This free aspect ratio calculator finds matching width and height for common ratios like 16:9, 4:3, and 1:1. Use it for video, responsive layouts, and social crops—all in your browser.
How it works
Pick a preset or enter a custom ratio. Type a width or height in pixels and the other dimension updates instantly. See a live preview plus ready-to-copy CSS aspect-ratio, padding-bottom fallback, and Tailwind class snippets. Preferences stay in local storage on this device.
Steps
- Choose a preset (16:9, 4:3, 1:1, and more) or type a custom ratio.
- Enter width or height in pixels.
- Read the paired dimension, simplified ratio, and orientation.
- Copy the CSS or Tailwind snippet you need.
Frequently asked questions
What is an aspect ratio?
An aspect ratio compares width to height, written as W:H (for example 16:9). Keeping that proportion prevents stretched or squashed images and video.
How do I calculate height from width?
Multiply width by the ratio’s height part and divide by the width part. For 16:9 at 1920px wide: 1920 × 9 ÷ 16 = 1080.
What is the CSS aspect-ratio property?
Modern CSS can reserve space with aspect-ratio: 16 / 9 so height follows width automatically. This tool also shows a padding-bottom fallback for older layouts.
Which presets are included?
Common video and layout ratios: 16:9, 4:3, 1:1, 21:9, 3:2, 9:16, 4:5, and 2:1. You can also enter any custom pair.
Is this aspect ratio calculator free?
Yes. It is free to use with no signup. Calculations stay in your browser.
Privacy: All math runs in your browser. Form values can persist in local storage on this device. Nothing is uploaded to Utility Tools servers.