Maths - Calculated new size of a resized image

Im using some simple maths to crop an image, im using the jQuery imageareaselect.js plugin to draw an additional layer over an image which i can resize with the cursor and then click a button to crop:

var div = $('.imgwrapper2');
  //image
  div.css('background-image', 'url(' + bigimg + ')');
  //width
  div.css('width', selection.x2 - selection.x1);
  //height
  div.css('height', selection.y2 - selection.y1);
  //Position
  div.css('background-position', -selection.x1 + 'px ' + -selection.y1 + 'px');
}  

I then use those coordinates to draw a new div and set the image as the background of that div with the relevant background position. Something like this:

<div class="imgwrapper2" style="background-image: url(&quot;http://farm6.static.flickr.com/5064/5618553713_96666c04e7.jpg&quot;); width: 368px; height: 345px; background-position: -81px -53px;">
</div>

So thats my cropped image.

What I'd now like to do is resize this image, for instance increase the size by 20% or reduce the size by 20%.

Im working on a static version at the moment to get the mathematics right to recalculate the size which just uses an image inside of a div using absolute positioning instead of background-position.

This is here: http://jsfiddle.net/AtUmf/2/

What I've done is multiply the DIV sizes by 20%, but how do I calculate th开发者_StackOverflow中文版e 20% increase for the position of the image in the DIV container?

Like this?

http://jsfiddle.net/AtUmf/6/

var zoomFactor = 1.2;
var $img = $('#innerdiv2 img');

$img.css({
    width: $img.width() * zoomFactor,
    height: $img.height() * zoomFactor,
    left: parseInt($img.css('left'), 10) * zoomFactor,
    top: parseInt($img.css('top'), 10) * zoomFactor,
});