Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nearest Normal Ratio Calculator

Nearest Normal Aspect Ratio

This function returns the nearest aspect ratio of a width and height within a limited range of possible aspect ratios.

In other words, while 649x360 technically has an aspect ratio of 649:360, it’s often useful to know that the nearest normal aspect ratio is actually 9:5 (648x360).

nearestNormalAspectRatio(width, height, [side], [maxWidth], [maxHeight])
  • width: The width of the space.
  • height: The height of the space.
  • side: The nearest ratio to side with. A number higher than zero tells the function to always return the nearest ratio that is equal or higher than the actual ratio, whereas a smaller number returns the nearest ratio higher that is equal or smaller than the actual ratio. Defaults to 0.
  • maxWidth: The maximum width in the nearest normal aspect ratio. Defaults to 16.
  • maxWidth: The maximum height in the nearest normal aspect ratio. Defaults to 16.
function nearestNormalAspectRatio(width, height, side) {
var
ratio = (width * 100) / (height * 100),
maxW = 3 in arguments ? arguments[2] : 16,
maxH = 4 in arguments ? arguments[3] : 16,
ratiosW = new Array(maxW).join(',').split(','),
ratiosH = new Array(maxH).join(',').split(','),
ratiosT = {},
ratios = {},
match,
key;
ratiosW.forEach(function (empty, ratioW) {
++ratioW;
ratiosH.forEach(function (empty, ratioH) {
++ratioH;
ratioX = (ratioW * 100) / (ratioH * 100);
if (!ratiosT[ratioX]) {
ratiosT[ratioX] = true;
ratios[ratioW + ':' + ratioH] = ratioX;
}
});
});
for (key in ratios) {
if (!match || (
!side && Math.abs(ratio - ratios[key]) < Math.abs(ratio - ratios[match])
) || (
side < 0 && ratios[key] <= ratio && Math.abs(ratio - ratios[key]) < Math.abs(ratio - ratios[match])
) || (
side > 0 && ratios[key] >= ratio && Math.abs(ratio - ratios[key]) < Math.abs(ratio - ratios[match])
)) {
match = key;
}
}
return match;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment