Convert Ratio to Percentage using JavaScript

Question

I'm in the process of writing script to support a web application to display images and allow the user to zoom/pan to view more detail. The script, written using JavaScript, supports a default zoom level between 0% and 100%, where 0% represents the image size after it is reduced to fit the browser window, and 100% represents the image at full resolution. The following formula is used to take a given percentage and display the image using the correct default zoom level. Below the formula are some calculations I used to ensure it functions correctly. Note that the ratios represent the size difference between the images.

X / (((Y - 1) * Z) + 1)

X = Ratio 1
Y = Ratio 2
Z = Percentage as Decimal

3.29 / (((3.29 - 1) * 000.00) + 1) = 3.29
3.29 / (((3.29 - 1) * 000.01) + 1) = 3.22
3.29 / (((3.29 - 1) * 000.10) + 1) = 2.67
3.29 / (((3.29 - 1) * 000.90) + 1) = 1.07
3.29 / (((3.29 - 1) * 001.00) + 1) = 1.00
3.29 / (((3.29 - 1) * 001.50) + 1) = 0.74
3.29 / (((3.29 - 1) * 002.00) + 1) = 0.58
3.29 / (((3.29 - 1) * 003.00) + 1) = 0.42
3.29 / (((3.29 - 1) * 004.00) + 1) = 0.32
3.29 / (((3.29 - 1) * 005.00) + 1) = 0.26
3.29 / (((3.29 - 1) * 010.00) + 1) = 0.13
3.29 / (((3.29 - 1) * 025.00) + 1) = 0.05
3.29 / (((3.29 - 1) * 050.00) + 1) = 0.03
3.29 / (((3.29 - 1) * 075.00) + 1) = 0.02
3.29 / (((3.29 - 1) * 100.00) + 1) = 0.01

My problem is that I want to briefly display the zoom level if the user changes it, but need to convert the ratios to percentages. The tricky part is that everything is reversed, where 1 (fixed) always represents the full sized image because it's size ratio is 1:1. The larger number represents the size difference between the two images, expressed as a ratio (varies) converted to a decimal.

Case 1:
3.290 = 0% (no zoom)
2.145 = 50%
1.000 = 100% (max zoom)
------------
1.183 = ?

Case 2:
5.470 = 0%
3.235 = 50%
1.000 = 100%
------------
4.680 = ?

Case 3:
7.630 = 0%
4.317 = 50%
1.000 = 100%
------------
3.745 = ?

Lastly, I have searched extensively for answers, but to no avail. Can anyone help me find a solution?

Update: I'm close to an answer, except that the results are inverted. In this application less is more and more is less, due to ratios being used in the calculations. Also, it was not clear in my first example, but Y and Z are variable and X is fixed. Since Y represents the variable image ratio, it's always the same as X during initialization because the image size has not yet been changed by the user.

In the following example X = 3.290 and Y varies between 1 and 3.290, where 3.290 should represent 0% and 1 should represent 100%

(Y - 1) / (X - 1) = Z

(3.290 - 1) / (3.290 - 1) * 100 = 100.0%
(3.235 - 1) / (3.290 - 1) * 100 = 097.5%
(2.280 - 1) / (3.290 - 1) * 100 = 055.8%
(2.230 - 1) / (3.290 - 1) * 100 = 053.7%
(2.145 - 1) / (3.290 - 1) * 100 = 050.0%
(1.830 - 1) / (3.290 - 1) * 100 = 036.2%
(1.660 - 1) / (3.290 - 1) * 100 = 028.8%
(1.100 - 1) / (3.290 - 1) * 100 = 004.3%
(1.010 - 1) / (3.290 - 1) * 100 = 000.4%
(1.000 - 1) / (3.290 - 1) * 100 = 000.0%

Answer 1

Simply solving X / (((Y - 1) * Z) + 1) = N for Z is completly correct but of not much help because your results, that is N are rounded.

Let's take the last one for example:

3.29 / (((3.29 - 1) * 100.00) + 1) = 0.01

That is not correct, the result is 329/23000 or in decimal: 0.014 30434782608695652173913043478260869565217391 (the sequence after the space repeats infinitely), so (X - N)/(N*(Y - 1)) with N = 0.01 gives 32800/229 or about 143.2314410 in decimal which is of yourse way off of the expected 100.0, nearly 50%!

There is no simple solution for it. Probably the simplest would be to use more digits for the lists and round to two digits precision (eg: with toFixed() ) for the user to disgust.

The most complicated would be to use rationals all over and that is, I admit it freely and without any shame, the way I would do it.

Answer 2

I solved my problem by calculating the inverse of the percentage using the following formula.

((X - 1) - (Y - 1)) / (X - 1) * 100 = Z

((3.290 - 1) - (3.290 - 1)) / (3.290 - 1) * 100 = 000.0%
((3.290 - 1) - (3.235 - 1)) / (3.290 - 1) * 100 = 002.4%
((3.290 - 1) - (2.280 - 1)) / (3.290 - 1) * 100 = 044.1%
((3.290 - 1) - (2.230 - 1)) / (3.290 - 1) * 100 = 046.3%
((3.290 - 1) - (2.145 - 1)) / (3.290 - 1) * 100 = 050.0%
((3.290 - 1) - (1.830 - 1)) / (3.290 - 1) * 100 = 063.8%
((3.290 - 1) - (1.660 - 1)) / (3.290 - 1) * 100 = 071.2%
((3.290 - 1) - (1.100 - 1)) / (3.290 - 1) * 100 = 095.6%
((3.290 - 1) - (1.010 - 1)) / (3.290 - 1) * 100 = 099.6%
((3.290 - 1) - (1.000 - 1)) / (3.290 - 1) * 100 = 100.0%