如何缩放整个div？

Question

I'm fooling around with a function right now on this page .

If you click the "who" section the div rotates. I'd like it to zoom and consume the page.

Is this possible? How can this be done?

Answer 1

After it rotates, set its width and height to be the width and height of the page.

$('#who').rotate({
    angle:-90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }], // remove the trailing comma here
    callback: function (){
        var $window = $(window);
        $(this).height($window.height()).width($window.width());
    }
});

---

Edit re: OP's comments

$('#who').rotate({
    angle: -90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }],
    callback: function (){
        $(this).width(800).height(600);
    }
});

See .height() and .width() .

---

Edit #2

With your current CSS, you need to scale the img .

$('#who').rotate({
    angle: -90,
    bind: [{
        click: function(){
            $(this).rotateAnimation(0);
        }
    }],
    callback: function (){
        $('#who > img').animate({height: 600, width: 800});
    }
});

If you change, say, the image's height and width to be 100% then you only need to change the size of the div and the image should scale with it.

$('#who').animate({height: 600, width: 800});