如何缩放整个div？答案

【问题标题】：How to zoom an entire div?如何缩放整个div？
【发布时间】：2011-03-08 01:55:39
【问题描述】：

我现在在 this page 上玩弄一个函数。

如果您单击“谁”部分，则 div 会旋转。我希望它可以缩放和使用页面。

这可能吗？如何做到这一点？

【问题讨论】：

【解决方案1】：

旋转后，将其宽高设置为页面的宽高。

$('#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());
    }
});

重新编辑：OP 的 cmets

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

请参阅 .height() 和 .width()。

编辑#2

使用您当前的 CSS，您需要缩放 img。

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

如果您将图像的height 和width 更改为100%，那么您只需更改div 的大小，图像就会随之缩放。

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

【讨论】：

谢谢。我试过没有用。我可能做错了。我只是像这样插入值吗？ .height($window.height(600)) .width($window.width(800));由于某种原因，我的原始编码也无法在 Firefox 中运行！
@Greg：在查看了旋转插件的工作原理后，我编辑了我的答案。这样更好吗？
嘿，马特，我看起来像这样 $('#who').rotate({ angle:-90, bind: [{ click: function(){ $(this). rotateAnimation(0); } }], // 去掉后面的逗号 callback: function (){ var $window = $(window); $(this).height($window.height(600)).width($ window.width(800)); } });看起来像你想象的那样吗？它仍然没有进行缩放。感谢您的帮助！
@Greg：你在你的网站上更新了吗？我在您的页面中没有看到最新版本。哦你到底为什么要将值传递给$window.height()？您是否尝试将图像本身设为 800 x 600？在这种情况下，您根本不需要 $window 部分，只需使用：$(this).height(600).width(800);。
我不知道我为什么这样做。我只是在尝试，因为它不起作用。该站点已使用您的最新代码进行更新。这个想法是让 div 扩展到 800 x 600。