Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the algorithm to calculate aspect ratio?

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.

~12 year old edit: this kind of question is rather interesting! There is something here right? Absolutely!

like image 746
Nathan Avatar asked Jul 27 '09 04:07

Nathan


People also ask

How is aspect ratio calculated?

Essentially, it describes an image's shape. Aspect ratios are written as a formula of width to height, like this: 3:2. For example, a square image has an aspect ratio of 1:1, since the height and width are the same. The image could be 500px × 500px, or 1500px × 1500px, and the aspect ratio would still be 1:1.

How do I calculate the aspect ratio of an image?

Calculate the relationship between the width (the first number) and the height (the second number). For example: Images that are 1,600 pixels x 900 pixels or 3,200 pixels x 1,800 pixels are in the 16:9 aspect ratio. Images that are 1,600 pixels x 1,600 pixels or 3,200 pixels x 3,200 pixels are in the 1:1 aspect ratio.

How do you calculate aspect ratio 16x9?

FORMULA. If the width divided by the height equals 1.778, then the aspect ratio is 16:9 (1.78:1). If you know the width of an object but not the height, then you can find the 16:9 height by dividing width by 1.778.

How do I find the aspect ratio in Python?

Integralist/aspect_ratio.py. def calculate_aspect(width: int, height: int) -> str: def gcd(a, b): """The GCD (greatest common divisor) is the highest number that evenly divides both width and height."""


2 Answers

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.

<html><body>     <script type="text/javascript">         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 ("<pre>");         document.write ("Dimensions = ", w, " x ", h, "<br>");         document.write ("Gcd        = ", r, "<br>");         document.write ("Aspect     = ", w/r, ":", h/r);         document.write ("</pre>");     </script> </body></html> 

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.

like image 98
paxdiablo Avatar answered Sep 26 '22 11:09

paxdiablo


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 
like image 45
Gishu Avatar answered Sep 23 '22 11:09

Gishu