Image is a little larger after rotating with jQueryRotate

I have tried using both jQueryRotate v2.0 and v1.7. But in both cases the image is little larger after rotation. How can I solve this problem? I'm rotating with the following code:

var开发者_JAVA技巧 test = 0;
$('#working-area .rotatable').live('click', function(event) {
    test = test + 90;
    $(this).rotate({
        angle: test,
        containment: "working-area"
    });
});

The image will surely take up larger space when it rotates especially if the image is a rectangle because the height and the width are of different sizes. Take a 8x4 piece of paper, for example, rotate it 45 degrees sideways. You will find that the paper now takes up half of its former height and double its former width. Now rotate it 22.5 degrees more and you will find that the height is now 3/4 larger.

The usual solution is to make a square dimension containment with the height or width of the image, whichever is higher, then add a quarter to that value to accommodate the change in dimension when rotating.

When you create image <img src="images/tool_box/1.png" class="rotatable"> this is what you get.

When you click on image, you get

<span style="display: inline-block; width: 97px; height: 11px;" id="" class="rotatable">
    <canvas width="97" style="position: relative; left: -0.310859px; top: -43.3109px;" height="97"></canvas>
</span>

Certainly this plugin is doing this. I can't help you. I suggest you to make your own function and do rotation.

<script src="jquery.js"></script>
<script>
    var imgcss = {"-webkit-transform":"rotate(-90deg)", "-moz-transform" : "rotate(-90deg)" };
    var imgcss1 = {"-webkit-transform":"rotate(0deg)", "-moz-transform" : "rotate(0deg)" };

    var flag = false;

    $(function ()
    {
        $('#img').live('click', function(event) {           
            if(flag == false){
                $(this).css(imgcss);
                flag = true;
            }
            else{
                $(this).css(imgcss1);
                flag = false;
            }
    });
    })
</script>
<div id="working-area">
    <img src="img.jpg" id="img"/>
</div>