在模仿作物上旋转图像

Question

我想在剪裁图像时允许旋转（不是真正裁剪，我只是使用CSS来模仿）。我使用Jcrop获取所选区域，然后使用一个包含图像的div来模拟裁剪行为（请参阅下面的代码）。

然而，当角度为90度时，图像从盒子中出来。我尝试将max-height，max-width以及width，height用于100%，但它无效。我也试图反转宽度和高度，但仍然没有工作。

<div>
    <img src='img.jpg' id='original' />
</div>
<div id='content' style='overflow: hidden; position: relative;'>
    <img src='img.jpg' style='position: absolute;' id='crop'  />
</div>
<button id='rotate'>90deg</button>

<script>
    $('#rotate').click(function() {
        $('#crop').css({
            '-webkit-transform': 'rotate(90deg)',
            '-moz-transform': 'rotate(90deg)',
            'transform': 'rotate(90deg)'
        });
    });

    jQuery(function($) {
        $('#original').Jcrop({
            onSelect: showCoords
        });
    });

    function showCoords(c) {
        $('#content').css({
            'width':  c.w + 'px',
            'height': c.h + 'px'
        });

        $('#crop').css({
            'top':  '-' + c.y + 'px',
            'left': '-' + c.x + 'px'
         });
    };
</script>