Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active December 6, 2022 18:14
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