What s the algorithm to calculate aspect ratio

Question

I plan to use it with JavaScript to crop an image to fit the entire window   Edit  I ll be using a 3rd party component that only accepts the aspect ratio in the format like  4 3  16 9

User · Answer

You can always start by making a lookup table based on common aspect ratios. Check https://en.wikipedia.org/wiki/Display_aspect_ratio Then you can simply do the division

For real life problems, you can do something like below

let ERROR_ALLOWED = 0.05
let STANDARD_ASPECT_RATIOS = [
  [1, '1:1'],
  [4/3, '4:3'],
  [5/4, '5:4'],
  [3/2, '3:2'],
  [16/10, '16:10'],
  [16/9, '16:9'],
  [21/9, '21:9'],
  [32/9, '32:9'],
]
let RATIOS = STANDARD_ASPECT_RATIOS.map(function(tpl){return tpl[0]}).sort()
let LOOKUP = Object()
for (let i=0; i < STANDARD_ASPECT_RATIOS.length; i++){
  LOOKUP[STANDARD_ASPECT_RATIOS[i][0]] = STANDARD_ASPECT_RATIOS[i][1]
}

/*
Find the closest value in a sorted array
*/
function findClosest(arrSorted, value){
  closest = arrSorted[0]
  closestDiff = Math.abs(arrSorted[0] - value)
  for (let i=1; i<arrSorted.length; i++){
    let diff = Math.abs(arrSorted[i] - value)
    if (diff < closestDiff){
      closestDiff = diff
      closest = arrSorted[i]
    } else {
      return closest
    }
  }
  return arrSorted[arrSorted.length-1]
}

/*
Estimate the aspect ratio based on width x height (order doesn't matter)
*/
function estimateAspectRatio(dim1, dim2){
  let ratio = Math.max(dim1, dim2) / Math.min(dim1, dim2)
  if (ratio in LOOKUP){
    return LOOKUP[ratio]
  }

  // Look by approximation
  closest = findClosest(RATIOS, ratio)
  if (Math.abs(closest - ratio) <= ERROR_ALLOWED){
    return '~' + LOOKUP[closest]
  }

  return 'non standard ratio: ' + Math.round(ratio * 100) / 100 + ':1'
}

Then you simply give the dimensions in any order

estimateAspectRatio(1920, 1080) // 16:9
estimateAspectRatio(1920, 1085) // ~16:9
estimateAspectRatio(1920, 1150) // non standard ratio: 1.65:1
estimateAspectRatio(1920, 1200) // 16:10
estimateAspectRatio(1920, 1220) // ~16:10

User · Answer

I think this does what you are asking for   webdeveloper com - decimal to fraction  Width height gets you a decimal  converted to a fraction with     in place of     gives you a  ratio

User · Answer

Here is a version of James Farey s best rational approximation algorithm with adjustable level of fuzziness ported to javascript from the aspect ratio calculation code originally written in python   The method takes a float  width height  and an upper limit for the fraction numerator denominator    In the example below I am setting an upper limit of 50 because I need 1035x582  1 77835051546  to be treated as 16 9  1 77777777778  rather than 345 194 which you get with the plain gcd algorithm listed in other answers    lt html gt   lt body gt   lt script type  text javascript  gt  function aspect ratio val  lim         var lower    0  1       var upper    1  0        while  true            var mediant    lower 0    upper 0   lower 1    upper 1             if  val   mediant 1   gt  mediant 0                 if  lim  lt  mediant 1                     return upper                            lower   mediant            else if  val   mediant 1     mediant 0                 if  lim  gt   mediant 1                     return mediant                            if  lower 1   lt  upper 1                     return lower                            return upper            else               if  lim  lt  mediant 1                     return lower                            upper   mediant                     document write  aspect ratio 800   600  50     lt br  gt     document write  aspect ratio 1035   582  50      lt br  gt     document write  aspect ratio 2560   1440  50      lt br  gt           lt  script gt   lt  body gt  lt  html gt       The result     4 3      1 33333333333   800 x 600   16 9     1 77777777778   2560 0 x 1440   16 9     1 77835051546   1035 0 x 582

User · Answer

aspectRatio   width   height   if that is what you re after  You can then multiply it by one of the dimensions of the target space to find out the other  that maintains the ratio  e g   widthT   heightT   aspectRatio heightT   widthT   aspectRatio

User · Answer

paxdiablo s answer is great  but there are a lot of common resolutions that have just a few more or less pixels in a given direction  and the greatest common divisor approach gives horrible results to them   Take for example the well behaved resolution of 1360x765 which gives a nice 16 9 ratio using the gcd approach  According to Steam  this resolution is only used by 0 01  of it s users  while 1366x768 is used by a whoping 18 9   Let s see what we get using the gcd approach   1360x765 - 16 9  0 01   1360x768 - 85 48  2 41   1366x768 - 683 384  18 9     We d want to round up that 683 384 ratio to the closest  16 9 ratio   I wrote a python script that parses a text file with pasted numbers from the Steam Hardware survey page  and prints all resolutions and closest known ratios  as well as the prevalence of each ratio  which was my goal when I started this      Contents pasted from store steampowered com hwsurvey  section  Primary Display Resolution  steam file      steam txt     Taken from http   upload wikimedia org wikipedia commons thumb f f0 Vector Video Standards4 svg 750px-Vector Video Standards4 svg png accepted ratios     5 4    4 3    3 2    8 5    5 3    16 9    17 9     ------------------------------------------------------- def gcd a  b       if b    0  return a     return gcd  b  a   b    ------------------------------------------------------- class ResData        -------------------------------------------------------       Expected format  1024 x 768 4 37  -0 21   w x h prevalence  change       def   init   self  steam line           tokens   steam line split              self width    int tokens 0           self height   int tokens 2           self prevalence   float tokens 3  replace                      This part based on pixdiablo s gcd answer - http   stackoverflow com a 1186465 828681         common   gcd self width  self height          self ratio   str self width   common          str self height   common          self ratio error   0            Special case  ratio is not well behaved         if not self ratio in accepted ratios              lesser error   999             lesser index   -1             my ratio normalized   float self width    float self height                 Check how far from each known aspect this resolution is  and take one with the smaller error             for i in range len accepted ratios                    ratio   accepted ratios i  split                      w   float ratio 0                   h   float ratio 1                   known ratio normalized   w   h                 distance   abs my ratio normalized - known ratio normalized                  if  distance  lt  lesser error                       lesser index   i                     lesser error   distance                     self ratio error   distance              self ratio   accepted ratios lesser index        -------------------------------------------------------     def   str   self           descr   str self width     x    str self height      -     self ratio     -     str self prevalence                if self ratio error  gt  0              descr      error    2f     self ratio error   100                return descr   -------------------------------------------------------   Returns a list of ResData def parse steam file steam file       result          for line in file steam file           result append ResData line       return result   ------------------------------------------------------- ratios prevalence      data   parse steam file steam file   print  Known Steam resolutions    for res in data      print res      acc prevalence   ratios prevalence res ratio  if  res ratio in ratios prevalence  else 0     ratios prevalence res ratio    acc prevalence   res prevalence    Hack to fix 8 5  more known as 16 10 ratios prevalence  16 10     ratios prevalence  8 5   del ratios prevalence  8 5    print   nSteam screen ratio prevalences    sorted ratios   sorted ratios prevalence items    key lambda x  x 1   reverse True  for value in sorted ratios      print value 0      - gt      str value 1            For the curious  these are the prevalence of screen ratios amongst Steam users  as of October 2012    16 9 - gt  58 9  16 10 - gt  24 0  5 4 - gt  9 57  4 3 - gt  6 38  5 3 - gt  0 84  17 9 - gt  0 11

User · Answer

This algorithm in Python gets you part of the way there     Tell me what happens if the windows is a funny size   Maybe what you should have is a list of all acceptable ratios  to the 3rd party component   Then  find the closest match to your window and return that ratio from the list

User · Answer

Based on the other answers  here is how I got the numbers I needed in Python   from decimal import Decimal  def gcd a b       if b    0          return a     return gcd b  a b   def closest aspect ratio width  height       g   gcd width  height      x   Decimal str float width  float g        y   Decimal str float height  float g        dec   Decimal str x y       return dict x x  y y  dec dec    gt  gt  gt  closest aspect ratio 1024  768    y   Decimal  3 0       x   Decimal  4 0       dec   Decimal  1 333333333333333333333333333

User · Answer

bit of a strange way to do this but use the resolution as the aspect  E G   1024 768  or you can try  var w   screen width  var h   screen height  for var i 1 asp w h i lt 5000 i       if asp i   1  0       i 9999      document write asp i     1 i

User · Answer

Here is my solution it is pretty straight forward since all I care about is not necessarily GCD or even accurate ratios  because then you get weird things like 345 113 which are not human comprehensible   I basically set acceptable landscape  or portrait ratios and their  value  as a float    I then compare my float version of the ratio to each and which ever has the lowest absolute value difference is the ratio closest to the item  That way when the user makes it 16 9 but then removes 10 pixels from the bottom it still counts as 16 9     accepted ratios          landscape              u 5 4   1 25            u 4 3   1 33333333333            u 3 2   1 5            u 16 10   1 6            u 5 3   1 66666666667            u 16 9   1 77777777778            u 17 9   1 88888888889            u 21 9   2 33333333333            u 1 1   1 0              portrait              u 4 5   0 8            u 3 4   0 75            u 2 3   0 66666666667            u 10 16   0 625            u 3 5   0 6            u 9 16   0 5625            u 9 17   0 5294117647            u 9 21   0 4285714286            u 1 1   1 0             def find closest ratio ratio       lowest diff  best std   9999999999   1 1      layout    portrait  if ratio  lt  1 0 else  landscape      for pretty str  std ratio in accepted ratios layout           diff   abs std ratio - ratio          if diff  lt  lowest diff              lowest diff   diff             best std   pretty str     return best std   def extract ratio width  height       try          divided   float width  float height          if divided    1 0  return  1 1          return find closest ratio divided      except TypeError          return None

User · Answer

As an alternative solution to the GCD searching  I suggest you to check against a set of standard values  You can find a list on Wikipedia

User · Answer

I guess you want to decide which of 4 3 and 16 9 is the best fit   function getAspectRatio width  height        var ratio   width   height      return   Math abs  ratio - 4   3    lt  Math abs  ratio - 16   9        4 3     16 9

User · Answer

Width   Height

User · Answer

function ratio w  h        function mdc w  h            var resto          do               resto   w   h               w   h              h   resto             while  resto    0            return w             var mdc   mdc w  h         var width   w mdc      var height   h mdc       console log width         height      ratio 1920  1080

User · Answer

Im assuming your talking about video here  in which case you may also need to worry about pixel aspect ratio of the source video  For example   PAL DV comes in a resolution of 720x576  Which would look like its 4 3  Now depending on the Pixel aspect ratio  PAR  the screen ratio can be either 4 3 or 16 9    For more info have a look here http   en wikipedia org wiki Pixel aspect ratio  You can get Square pixel Aspect Ratio  and a lot of web video is that  but you may want to watch out of the other cases   Hope this helps  Mark

User · Answer

in my case i want something like       10 5 15 20 25  -    2  1  3  4  5      x000D   x000D  function ratio array   x000D    let min   Math min    array   x000D    let ratio   array map  element   gt   x000D      return element min  x000D        x000D    return ratio  x000D    x000D  document write ratio  10 5 15 20 25           2  1  3  4  5   x000D   x000D   x000D

User · Answer

I gather you re looking for an usable aspect ratio integer integer solution like 16 9 rather than a float 1 solution like 1 77778 1   If so  what you need to do is find the greatest common divisor  GCD  and divide both values by that  The GCD is the highest number that evenly divides both numbers  So the GCD for 6 and 10 is 2  the GCD for 44 and 99 is 11   For example  a 1024x768 monitor has a GCD of 256  When you divide both values by that you get 4x3 or 4 3   A  recursive  GCD algorithm   function gcd  a b       if b    0          return a     return gcd  b  a mod b    In C   static int gcd  int a  int b        return  b    0    a   gcd  b  a b      int main void        printf   gcd 1024 768     d n  gcd 1024 768        And here s some complete HTML Javascript which shows one way to detect the screen size and calculate the aspect ratio from that  This works in FF3  I m unsure what support other browsers have for screen width and screen height    lt html gt  lt body gt       lt script type  text javascript  gt          function gcd  a  b                return  b    0    a   gcd  b  a b                     var w   screen width          var h   screen height          var r   gcd  w  h           document write    lt pre gt             document write   Dimensions      w    x    h    lt br gt             document write   Gcd             r    lt br gt             document write   Aspect          w r       h r           document write    lt  pre gt          lt  script gt   lt  body gt  lt  html gt    It outputs  on my weird wide-screen monitor    Dimensions   1680 x 1050 Gcd          210 Aspect       8 5   Others that I tested this on   Dimensions   1280 x 1024 Gcd          256 Aspect       5 4  Dimensions   1152 x 960 Gcd          192 Aspect       6 5  Dimensions   1280 x 960 Gcd          320 Aspect       4 3  Dimensions   1920 x 1080 Gcd          120 Aspect       16 9   I wish I had that last one at home but  no  it s a work machine unfortunately   What you do if you find out the aspect ratio is not supported by your graphic resize tool is another matter  I suspect the best bet there would be to add letter-boxing lines  like the ones you get at the top and bottom of your old TV when you re watching a wide-screen movie on it   I d add them at the top bottom or the sides  whichever one results in the least number of letter-boxing lines  until the image meets the requirements   One thing you may want to consider is the quality of a picture that s been changed from 16 9 to 5 4 - I still remember the incredibly tall  thin cowboys I used to watch in my youth on television before letter-boxing was introduced  You may be better off having one different image per aspect ratio and just resize the correct one for the actual screen dimensions before sending it down the wire

User · Answer

Just in case you re a performance freak     The Fastest way  in JavaScript  to compute a rectangle ratio it o use a true binary Great Common Divisor algorithm    All speed and timing tests have been done by others  you can check one benchmark here  https   lemire me blog 2013 12 26 fastest-way-to-compute-the-greatest-common-divisor    Here is it    x000D   x000D     the binary Great Common Divisor calculator    x000D  function gcd  u  v    x000D      if  u     v  return u  x000D      if  u     0  return v  x000D      if  v     0  return u  x000D   x000D      if   u  amp  1  x000D          if  v  amp  1  x000D              return gcd u  gt  gt  1  v   x000D          else x000D              return gcd u  gt  gt  1  v  gt  gt  1   lt  lt  1  x000D   x000D      if   v  amp  1  return gcd u  v  gt  gt  1   x000D   x000D      if  u  gt  v  return gcd  u - v   gt  gt  1  v   x000D   x000D      return gcd  v - u   gt  gt  1  u   x000D    x000D   x000D     returns an array with the ratio    x000D  function ratio  w  h    x000D   var d   gcd w h   x000D   return  w d  h d   x000D    x000D   x000D     example    x000D  var r1   ratio 1600  900   x000D  var r2   ratio 1440  900   x000D  var r3   ratio 1366  768   x000D  var r4   ratio 1280  1024   x000D  var r5   ratio 1280  720   x000D  var r6   ratio 1024  768   x000D   x000D   x000D     will output this   x000D  r1   16  9  x000D  r2   8  5  x000D  r3   683  384  x000D  r4   5  4  x000D  r5   16  9  x000D  r6   4  3  x000D     x000D   x000D   x000D

User · Answer

I believe that aspect ratio is width divided by height    r   w h

[javascript] What's the algorithm to calculate aspect ratio?

Examples related to javascript

Examples related to algorithm

Examples related to crop

Examples related to aspect-ratio