CODEWITHSUNDEEP
javascriptjqueryhtml
SporeDev
SporeDev

Reputation: 608

JavaScript aspect ratio calculator

I try to create a JavaScript conditional that uses the results of a function to display one part of the HTML code or another.

I found this code that calculates the aspect ratio on Gist:

/* euclidean GCD (feel free to use any other) */
function gcd(a,b) {if(b>a) {temp = a; a = b; b = temp} while(b!=0) {m=a%b; a=b; b=m;} return a;}

/* ratio is to get the gcd and divide each component by the gcd, then return a string with the typical colon-separated value */
function ratio(x,y) {c=gcd(x,y); return ""+(x/c)+":"+(y/c)}

/* eg: 
> ratio(320,240)
"4:3"
> ratio(360,240)
"3:2"
*/

What I want is to calculate the screen aspect ratio and if the screen ratio is 16:9 to run the following code:

<img src="https://via.placeholder.com/1920X1080.jpg">

If the aspect ratio is 4:3 it should load this:

<img src="https://via.placeholder.com/1024X768.jpg">

This goes on for multiple screen resolutions.

Here is a JSBin link: http://jsbin.com/fedipuqasi/edit?html,js,output.

I did some research on StackOverflow but couldn't find any complete example and, unfortunately, it seems that my JavaScript skills got rusty.

Let me know if I need to provide additional details.

Upvotes: 0

Views: 6998

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42746

The code you show is for displaying a ratio in a specific format, eg "4:3". You don't need to use that for testing.

A ratio is just a width divided by height, so just check against that result

var img = new Image();
var widescreen = 16/9; 
var standard = 4/3;

var userRatio = window.screen.width / window.screen.height;

if(userRatio == widescreen){
  img.src = 'https://via.placeholder.com/1920X1080.jpg';
} else if( userRatio == standard ){
  img.src = 'https://via.placeholder.com/1024X768.jpg';  
} else {
  //user using different screen resolution
  img.src = 'https://via.placeholder.com/other.jpg';  
}

document.body.appendChild(img);

And if you don't want to use a bunch of if statements you could store all the url's in an object where the ratio is the property names. And then use the calculated ratio to get the right url.

//Uses computed property names: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
//If you are wanting to support older browsers, change this accordingly.
var ratioUrls = {
  [16/9]:"https://via.placeholder.com/1920X1080.jpg",
  [4/3]:"https://via.placeholder.com/1024X768.jpg"
}

var userRatio = window.screen.width / window.screen.height;

var img = new Image();
img.src = ratioUrls[userRatio] || "https://via.placeholder.com/other.jpg";
document.body..appendChild(img);

Upvotes: 1

lukaleli
lukaleli

Reputation: 3625

That should work.

function gcd(a, b) {
  if (b > a) {
    temp = a;
    a = b;
    b = temp
  }
  while (b != 0) {
    m = a % b;
    a = b;
    b = m;
  }
  return a;
}

/* ratio is to get the gcd and divide each component by the gcd, then return a string with the typical colon-separated value */
function ratio(x, y) {
  c = gcd(x, y);
  return "" + (x / c) + ":" + (y / c)
}

var ratio = ratio(screen.width, screen.height)
var imgContainer = document.querySelector('#img')

switch (ratio) {
  case "16:9":
    imgContainer.innerHTML = '<img src="https://via.placeholder.com/1920X1080.jpg">'
    break
  case "4:3":
    imgContainer.innerHTML = '<img src="https://via.placeholder.com/1024X768.jpg">'
    break
  default:
    imgContainer.innerHTML = '<img src="https://via.placeholder.com/other.jpg">'
    break    
}
#img {
  width: 300px;
  height: 300px;
}

#img img {
  display: block;
  max-width: 100%;
}
<div id="img">

</div>

Upvotes: 2

Related Questions