Calculate dimensions and simplify ratios instantly
Detected Aspect Ratio
0 : 0
(0.00:1)
Calculate New Dimensions
Understanding Aspect Ratio
The aspect ratio of an image or screen is the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, such as 16:9. In this example, for every 16 units of width, there are 9 units of height.
Why Aspect Ratio Matters
Maintaining the correct aspect ratio is crucial for digital media for several reasons:
Preventing Distortion: Scaling an image without maintaining its ratio leads to stretching or squishing, making the content look unprofessional.
Platform Compatibility: Instagram Stories require 9:16, while YouTube standards are 16:9. Using the wrong ratio can result in unwanted "black bars" (letterboxing).
SEO and Core Web Vitals: Specifying image dimensions with the correct aspect ratio helps browsers allocate space before images load, preventing "Layout Shift."
Common Ratios and Examples
Ratio
Common Resolution
Usage
16:9
1920 x 1080
HD Video, TV, YouTube
4:3
1024 x 768
Older TVs, Monitors, Photography
1:1
1080 x 1080
Instagram Feed Posts
9:16
1080 x 1920
TikTok, Reels, Stories
How to Use the Calculator
1. Enter your original width and height (e.g., 1920 and 1080).
2. The calculator will simplify the ratio to its lowest form (16:9).
3. To find a new size while keeping the ratio, enter a value in either New Width or New Height. The corresponding value will calculate automatically.
function getGCD(a, b) {
return b == 0 ? a : getGCD(b, a % b);
}
function updateFromOriginal() {
var w1 = parseFloat(document.getElementById('w1').value);
var h1 = parseFloat(document.getElementById('h1').value);
var ratioDisplay = document.getElementById('ratioResult');
var decimalDisplay = document.getElementById('decimalResult');
if (w1 > 0 && h1 > 0) {
var common = getGCD(w1, h1);
var rw = w1 / common;
var rh = h1 / common;
ratioDisplay.innerText = rw + " : " + rh;
decimalDisplay.innerText = "(" + (w1 / h1).toFixed(2) + ":1)";
// Clear the target inputs or update them if one is present
var w2 = document.getElementById('w2').value;
var h2 = document.getElementById('h2').value;
if(w2 > 0) calculateHeight();
else if(h2 > 0) calculateWidth();
} else {
ratioDisplay.innerText = "0 : 0";
decimalDisplay.innerText = "(0.00:1)";
}
}
function calculateHeight() {
var w1 = parseFloat(document.getElementById('w1').value);
var h1 = parseFloat(document.getElementById('h1').value);
var w2 = parseFloat(document.getElementById('w2').value);
var h2Input = document.getElementById('h2');
if (w1 > 0 && h1 > 0 && w2 > 0) {
var h2 = (h1 / w1) * w2;
h2Input.value = Math.round(h2 * 100) / 100;
}
}
function calculateWidth() {
var w1 = parseFloat(document.getElementById('w1').value);
var h1 = parseFloat(document.getElementById('h1').value);
var h2 = parseFloat(document.getElementById('h2').value);
var w2Input = document.getElementById('w2');
if (w1 > 0 && h1 > 0 && h2 > 0) {
var w2 = (w1 / h1) * h2;
w2Input.value = Math.round(w2 * 100) / 100;
}
}
function setPreset(w, h) {
document.getElementById('w1').value = w;
document.getElementById('h1').value = h;
document.getElementById('w2').value = "";
document.getElementById('h2').value = "";
updateFromOriginal();
}