# Aspect ratio, js/php? formula? solution?



## digibucc (Sep 22, 2011)

I am redesigning a site i manage with the goal of making it cleaner and less "busy" (finally!)

I already know screen.width & height to get the size.  and i have read of a few different ways to get an idea of the ratio with that, but they all seem too complicated.

is there not a simple formula that can give you aspect ratio given width and height in pixels? (eg 1920x1080)if not simple, how would any of you detect the aspect ratio?

*the reason for this , is the design will rely on a full photo background,* and i want it to stay full all the time.  I have a js script that resizes it on the fly, but it relies on knowing the starting aspect ratio. i want to make three basic ones, one for 5:4, 4:3, and 16:9 each.  but i need to know their screen ratio to pick the right one.

i started by just using width, as that's pretty telling - but it's not enough.  also, firefox 6.02 for some reason reports the total screen as being 1760 - whereas IE sees it as 1920 (correct).

here you can see:
here is the new design so far
coming from their old design

let me know what you think!


----------



## Disparia (Sep 22, 2011)

First off, I wouldn't use the screen size. It's the size of the users screen, not the view in the browser (only time they would be the same is in "F11" mode).


This may help you with what property applies to which element:

http://www.quirksmode.org/mobile/viewports.html


----------



## digibucc (Sep 22, 2011)

Jizzler said:


> http://www.quirksmode.org/mobile/viewports.html



thanks, didn't know of innerWidth.  i didn't realize i could use onresize to check and keep it updated, which will then re-size the background. still, I would've used screen.availWidth

still need to know which size to use, so i'm no further - but a fixed mistake is good


----------



## digibucc (Sep 22, 2011)

bumpity


----------



## FordGT90Concept (Sep 22, 2011)

The formula is:

target width / original width = ratio
t/o=r

e.g. you got 800 pixels wide and you want 1920 pixels wide...
1920/800=r
2.4=r

You can then get the height using the ratio.  For example, if it was 640 pixels tall, times it by the ratio (2.4), and your new height is 1536.

800x640 would scale to 1920x1536

The easiest way to get the ratio is to divide width by height: width/height.

4:3 = 1.3333333333333333333333333333333
5:4 = 1.25
8:5 = 1.6
16:9 = 1.7777777777777777777777777777778


----------



## Kreij (Sep 22, 2011)

If the target aspect ratio is not the same as the original pictures aspect ratio you are going to get visual distortion (stretching or compression).
You could auto-crop the image to match the display area's aspect ratio before resizing, if you want to get fancy.

Also remember that you want the images to be high enough resolution so that when they fill the space they don't end up looking like something out of Minecraft.


----------



## FordGT90Concept (Sep 22, 2011)

You don't even have to autocrop.  If you take a really large image and set it as the background, the browsers automatically crop everything that can't be shown.  Just keep in mind that large images are hard on slow internet connections.


----------



## digibucc (Sep 23, 2011)

Kreij said:


> visual distortion





FordGT90Concept said:


> the browsers automatically crop



both are things i am trying to avoid.  not only do i need the photo to fill the browser, i need it to stay scaled perfectly for each one.

I was going to detect the a/r, and then load one of three versions of the background depending on their a/r.  they would actually be different jps that would be cropped manually to fit exactly how i want. if the user's a/r is nonstandard, i will get the closest fit.

here you can see what i mean:
here is the new design so far
coming from their old design

let me know what you think!



FordGT90Concept said:


> Just keep in mind that large images are hard on slow internet connections.


yes, on production i will optimize the image as much as possible, but it needs to be HQ as it IS the design 

thank you!


----------



## FordGT90Concept (Sep 24, 2011)

Remember, browsers can be resized and the viewable space of the browser, unless running full screen, rarely matches the desktop resolution/ratio.  You'd have to have virtually an infinite number of images on the server and the JS constantly refresh the background in order for it to look right all the time.

If I were you, I'd make a large image and with CSS, center it vertically and horizontally: background-position:center center;


----------



## digibucc (Sep 24, 2011)

FordGT90Concept said:


> If I were you, I'd make a large image and with CSS, center it vertically and horizontally: background-position:center center;



that was my next solution, however i already have a bit of js that resizes the bakground as the window gets resized.  i just needed 3 images , one for each a/r, so it would have one that isn't warped for their a/r to use.

still though, centering will be much simpler.


----------



## FordGT90Concept (Sep 24, 2011)

But people don't have to resize their resolution to the same ratio.  If someone opened the page full screen and then made it horizontally smaller, the image is going to look really bad (squished).  The aspect ratios of browsers are nearly infinite.


----------



## digibucc (Sep 24, 2011)

FordGT90Concept said:


> But people don't have to resize their resolution to the same ratio.  If someone opened the page full screen and then made it horizontally smaller, the image is going to look really bad (squished).  The aspect ratios of browsers are nearly infinite.



yeah, i know.  but we also don't care too much.  the chances heavily favor our users leaving windows maxed, and for the ones that wouldn't do that the value of having the entire background display on their browser is more important.

not the current background necessarily, but the plan is to have different designs for different events, holidays, etc - and we would like the entire photo to display for as many people as possible.

but, if i can check the original ar, then  have the image auto-resize to a point, then for the few that warp it badly, it will auto crop and be centered .  i can make that happen


----------

