Sunday, May 12, 2024
 Popular · Latest · Hot · Upcoming
100
rated 0 times [  103] [ 3]  / answers: 1 / hits: 159110  / 15 Years ago, mon, july 27, 2009, 12:00:00

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!


More From » algorithm

 Answers
78

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) = %dn,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.


[#99052] Wednesday, July 22, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kylanalis

Total Points: 438
Total Questions: 85
Total Answers: 102

Location: Barbados
Member since Sun, Nov 27, 2022
1 Year ago
kylanalis questions
Sat, Oct 2, 21, 00:00, 3 Years ago
Tue, Oct 13, 20, 00:00, 4 Years ago
Thu, Feb 13, 20, 00:00, 4 Years ago
Tue, Jan 7, 20, 00:00, 4 Years ago
;