Aspect Ratio Calculator
Simplify ratios and scale dimensions proportionally.
Scale proportionally
1280 ร 720 (using 16:9)
/* keeps 16:9 at any width */
.box {
aspect-ratio: 16 / 9;
/* or the classic padding hack: */
/* padding-top: 56.250%; */
}About the Aspect Ratio Calculator
Simplify any pixel dimensions to their smallest whole ratio, see the decimal value, orientation and megapixels, then scale to a new width or height while preserving the ratio. Presets for 16:9, 4:3, 21:9, 1:1, 3:2, 5:4 and the cinematic 2.39:1 seed the fields, and a responsive CSS snippet is generated.
How to use the Aspect Ratio Calculator
- Enter the original width and height in pixels, or click a preset ratio button.
- Read the simplified ratio, decimal form, orientation and megapixel count.
- Type a new width or new height to get the matching proportional dimension.
- Copy the CSS snippet with the aspect-ratio property for your stylesheet.
Aspect Ratio Calculator FAQ
How is the ratio simplified?
By dividing both dimensions by their greatest common divisor, so 1920 ร 1080 reduces exactly to 16:9 regardless of the pixel count.
Can I scale by height instead of width?
Yes โ fill only one of the two new-dimension fields and the other is computed; entering both would risk conflicting with the ratio.
What is in the CSS snippet?
An aspect-ratio property using your simplified ratio, plus the classic padding-top percentage hack as a comment for older browser support.