jquery – 缩放div与其内容适合窗口

我有一个固定大小的< div>具有一些复杂的内容(包括文本和背景图像).这< div>它的大小以像素为单位(并且其内容取决于此大小,内容位置也以像素为单位进行硬编码).

这是一个非常简单的例子：http://jsfiddle.net/dg3kj/.

我需要把div和它的内容进行缩放,保持其长宽比,所以它适合窗口.

一个解决方案,不需要我手动更改< div>内容是优选的(它是动态生成的,是一堆非常混乱的遗留代码,我想避免触摸). JavaScript(jQuery)解决方案是可行的(包括改变生成内容的解决方案 – 只要它是在生成本身后完成的).

我试图用变换：scale(),但是没有产生令人满意的结果.参见这里：http://jsfiddle.net/sJkLn/1/.(我希望红色背景不可见 – 即最外面的< div>大小不应该按照缩小的< div>的原始尺寸拉伸.)

任何线索？

解决方法

我不完全确定这是否满足您的需求,但如果不符合您的需求,也许会刺激其他想法.

这里我使用transition：scale()来管理需要按比例缩放的div的大小.变换起点设置在左上角,以保持div在左上角.

当div需要缩放时,它的包装div也是大小的.这应该允许页面上的其他内容正确浏览器调整大小.如果包装div不存在,您可以使用$.wrap()动态添加一个,尽管它可能会“有趣”地计算出要转移哪些样式,以保持整体布局平稳运行.

Demo Fiddle Demo with content

CSS：

#wrap {
    position: relative;
    width: 640px;
    height: 480px;
    background-color: red;
}
#outer {
    position: relative;
    width: 640px;
    height: 480px;
    background: url('http://placekitten.com/640/480') no-repeat center center;
    -webkit-transform-origin: top left;
}

码：

var maxWidth  = $('#outer').width();
var maxHeight = $('#outer').height();

$(window).resize(function(evt) {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();
    var scale;

    // early exit
    if(width >= maxWidth && height >= maxHeight) {
        $('#outer').css({'-webkit-transform': ''});
        $('#wrap').css({ width: '',height: '' });
        return;
    }

    scale = Math.min(width/maxWidth,height/maxHeight);

    $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
    $('#wrap').css({ width: maxWidth * scale,height: maxHeight * scale });
});