Question

I need help with math / algorithm to take an image of known size and fit to one of two screen dimensions:

720 x 480 or 1280 x 1024.

The image dimensions are coming from an XML file, however those dimensions are the web dimensions, I also get a selection of images from the XML that may be of higher and lower resolution than the web dimensions.

What I want is to use the aspect ration of the web dimensions to display the higher resolution image, if available, on an HD (1280×720) screen, or, if the user is on an SD screen (720×480) display the image on that screen.

Other things that would be useful for this, but lower priority, would be, if I know the resolution of the image is smaller in both dimensions than an SD screen (in this case, all I know is the web dimension, and the horizontal dimension of the image file), to display it as actual size on that screen.

Answer 1

Generic as can be:

Image data: (w_i, h_i) and define r_i = w_i / h_i
Screen resolution: (w_s, h_s) and define r_s = w_s / h_s

Scaled image dimensions:

rs > ri ? (wi * hs/hi, hs) : (ws, hi * ws/wi)

So for example:

         20
|------------------|
    10
|---------|

--------------------     ---   ---
|         |        |      | 7   |
|         |        |      |     | 10
|----------        |     ---    |
|                  |            |
--------------------           ---

ws = 20
hs = 10
wi = 10
hi = 7

20/10 > 10/7 ==> (wi * hs/hi, hs) = (10 * 10/7, 10) = (100/7, 10) ~ (14.3, 10)

Which as you can see clearly scales to the screen size, because the height is that of the screen but clearly keeps aspect ratio since 14.3/10 ~ 10/7

UPDATE

Center the image as follows:

call (w_new, h_new) the new dimensions.

top = (hs - hnew)/2
left = (ws - wnew)/2