increase/decrease css width on click with jquery/javascript

Question

I would need to gradually increase and decrease the width of a img element inside a fixed width and height div, let's say +10%/-10%, on click of a button. How can I do that? What I need to achieve is some sort of zooming of the img element contained inside the div (which has overflow:auto).

I'm using jquery and jquery ui because I would need it to be pannable. The result should be something like facebook covers, where you have an image which adapts to it's container (and that's already implemented) but where the user can zoom in/out the contained img element and pan it around to choose how it looks best.

I have no idea how to do it, please help!

Thank you so much

Solution

DEMO: http://jsfiddle.net/7gVgX/

JQuery

$('div').click(function () {
    $(this).css({
        'width' : $(this).width()  * 1.1
      , 'height': $(this).height() * 1.1
    });
});