CSS Scale, then resize to original

Question

I'm creating a "zoom" effect with a div with overflow:scroll. Here's my dillema:

I use the following:

$('#object').css({ 'transform':'scale(50)' });

Which works beautifully, but now I would like to mathematically resize the element to it's original width/height (keeping the scale at 50%, or whatever the value might be...)

$('#object').css({ 'width': ?+'px', 'height': ?+'px' });

Pretty sure this is a math issue, I can get close with the following:

new_width = parseInt(origWidth) + parseInt(Math.round(origWidth*((100-zoomScale)/100)));
new_height = parseInt(origHeight) + parseInt(Math.round(origHeight*((100-zoomScale)/100)));

Any help would be appreciated!

Answer 1

Your math is wrong.

700 * 0.5 = 350

But... if 700 represent 50%, then 100% will be 1400 and not 700 + 350...

So:

700 * 2 = 1400

supose my vars are that the math to get the oposite keep zoom will be:

(1/0.5) * 700

The math formula will be:

(1/(zoomScale/100)) * originalValue

For the original values, you can use the css width or height they will still the pixel original value, the modified by zoom value will be the clientWidth, clientHeight, offsetWidth and offsetHeight element properties.

• Fluidbyte: That works well, thanks. Now, what if I want to upsize, let's say 150%?
• Gabriel Gartz: (1/zoomScale/100))*originalValue where 1 is your scale factor, to 150%, change 1 to 1.5. Don't forgot to accept the answer if it help you :)