title: zoom out an image keep viewing center in center
body: <p>I've been assigned to make an image zoom in and zoom out javascript application,
  but with draggable image and when zoom in and out I must keep the viewing center of the container , in the center.
  I've done the zoom in part with all the calculation and keeping left, top ratio.
  using this 
  <a href="http://jsfiddle.net/phHqQ" rel="nofollow noreferrer">http://jsfiddle.net/phHqQ/</a></p>
  
  <pre><code>$("#zoom").on("click", function (e) {
    var container = $("#container");
    var image = $("#container img");
  
    var css = {};
    css.height = image.height() + (image.height() * 0.2);
    css.width = image.width() + (image.width() * 0.2);
  
    var x = Math.abs(image.position().left) + container.width() / 2;
    var y = Math.abs(image.position().top) + container.height() / 2;
    var ratio = css.width / image.width();
  
    var newX = x * ratio;
    var newY = y * ratio;
  
    css.left = image.position().left - (newX - x);
    css.top = image.position().top - (newY - y);
  
    image.css(css);
  });
  </code></pre>
  
  <p>please anyone can guide/make the zoom out feature from it </p>