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()动态添加一个，但它可能会“有趣”确定要转移的样式以保持整体布局顺利运行。 / p>

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

如果有人正在构建1920x1080的全屏应用程序，并希望完美适合较小的屏幕-例如1366x768。这是我在Vue.js中所做的-但可以使用纯js和css完成-根据上述答案-主要的重要性是我专门设置了原始宽度和高度，否则对我不起作用：

App.vue （如果localStorage中存在lowres，则为条件类）

    <template>
        <div id="external-app-wrapper" :class="{lowres: isLowRes}">
            <div id="internal-app-wrapper">
                <router-view />
            </div>
        </div>
   </template>

computed: {

      isLowRes() {
         return localStorage.getItem('lowres') !== null
      }
}

比例计算为：1366/1920和786/1080

    #external-app-wrapper {
        width: 1920px;
        height: 1080px;
    }

    .lowres #internal-app-wrapper {
        transform-origin: top left;
        transform: scale(0.71145833333, 0.71111111111);
    }

router.js （分辨率是可选的）

       {
            path: '/app/:resolution?',
            name: 'App Home',
            component: () => import('@/components/routes/HomeRoute'),
            meta: {
                title: 'App Home'
            }
        }

在HomeRoute.vue中，我有：

        mounted() {
            if (this.$route.params.resolution === 'lowres') {
                localStorage.setItem('lowres', 'true')
                this.$router.push({ path: '/app' })
                this.$router.go()
            } else if (this.$route.params.resolution === 'highres') {
                localStorage.removeItem('lowres')
                this.$router.push({ path: '/app' })
                this.$router.go()
            }
        }

因此导航到/app/lowres会重定向到/app并缩小整个应用程序并重定向到/app/highres并重定向到/app，并且分辨率恢复正常

希望有人发现它有用：）

Answer 3

我从dc5中得到了答案，并将其放在一个小的函数中，该函数可以让您根据窗口设置比例。

false

如果您希望元素适合但不被切除，只需将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，或仅将此函数的fit参数设置为true。

最小版本：

Math.max

Answer 4

如果需要根据窗口动态设置，可以将div设置为可用窗口不动产的百分比。

    jQuery(document).ready(function ($) {
        var percentChange = .66;
        var newWidth = $(window).width() * percentChange; 
        $('#primary').css('width', newWidth + 'px');
    });

Answer 5

只要您使内容的维度基于％，那么您肯定能够根据外部div动态调整它们的大小。然后只使用jQuery：

jQuery(document).ready(function ($) {
    var newWidth = '300px';
    $('.your-div').css('width', newWidth);
});

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

5 个答案: