缩放div及其内容以适合窗口

Question

我有一个固定大小的<div>复杂内容(包括文本和背景图像).这<div>有它的像素大小的硬编码(和它的内容依赖于这种规模和内容位置在像素硬编码为好).

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

我需要缩放div及其中的内容,保持其宽高比,以便适合窗口.

一个不需要我手动更改<div>内容的解决方案是优选的(它是动态生成的,并且是一堆非常混乱的遗留代码,我希望避免触及).JavaScript(jQuery)解决方案是可以的(包括那些改变生成内容的解决方案 - 只要它是在生成本身之后完成的).

我试着玩transform: scale(),但没有产生满意的结果.见这里:http://jsfiddle.net/sJkLn/1/.(我希望红色背景不可见 - 即最外面的<div>尺寸不应该按照缩小的原始尺寸拉伸<div>.)

有线索吗？

Answer 1

我不完全确定这是否符合您的需求,但如果没有,它可能会刺激其他一些想法.

在这里,我transition: scale()用来管理需要按比例缩放的div的大小. transform-origin设置为top left保持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 });
});

Answer 2

我从 dc5 中获取了答案，并将其放入一个小函数中，该函数允许您根据窗口设置比例。

function scaleBasedOnWindow(elm, scale=1, fit=false){
    if(!fit){
        elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }else{
        elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';
    }
}

如果您希望元素适合而不被切断，只需更改Math.min为Math.max，或者只需将此函数的 fit 参数设置为 true 。

缩小版：

function scaleBasedOnWindow(elm,scale=1,fit){if(!fit){elm.style.transform='scale('+scale/Math.min(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}else{elm.style.transform='scale('+scale/Math.max(elm.clientWidth/window.innerWidth,elm.clientHeight/window.innerHeight)+')';}}