jQuery 使用其内容缩放 div 以适合窗口

Scale div with its content to fit window

提问by Alexander Gladysh

I have a fixed-size <div>with some complex content (including text and background images). This <div>has its size hardcoded in pixels (and its content depends on this size, and content positions are hardcoded in pixels as well).

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

Here is a greatly simplified example: http://jsfiddle.net/dg3kj/.

这是一个大大简化的示例：http: //jsfiddle.net/dg3kj/。

I need to scale that div and the content inside it, maintaining its aspect ratio, so it fits the window.

我需要缩放那个 div 和里面的内容，保持它的纵横比，所以它适合窗口。

A solution that would not require me to manually change <div>contents is preferable (it is generated dynamically and is a bunch of very messy legacy code which I would like to avoid touching). JavaScript (jQuery) solutions are OK (including ones that change the generated content —?as long as it is done post-factum of generation itself).

不需要我手动更改<div>内容的解决方案是可取的（它是动态生成的，并且是一堆非常凌乱的遗留代码，我想避免触及它们）。JavaScript (jQuery) 解决方案是可以的（包括改变生成内容的解决方案——只要它是在生成本身之后完成的）。

I tried to play with transform: scale(), but it did not yield satisfactory results. See here: http://jsfiddle.net/sJkLn/1/. (I expect the red background to be not visible —?i.e. outermost <div>size should not be stretched by the originaldimensions of scaled down <div>.)

我尝试使用transform: scale()，但没有产生令人满意的结果。见这里：http: //jsfiddle.net/sJkLn/1/。（我希望红色背景是不可见的——即最外层的<div>尺寸不应该被Scaled down的原始尺寸拉伸<div>。）

Any clues?

有什么线索吗？

回答by dc5

I'm not entirely sure if this meets your needs, but perhaps it will spur some other ideas if not.

我不完全确定这是否满足您的需求，但如果不满足，它可能会激发一些其他想法。

Here I'm using transition: scale()to manage the size of the div that needs to be proportionally scaled. transform-originis set to top leftto keep the div hugging the top left corner.

这里我transition: scale()用来管理需要按比例缩放的 div 的大小。 transform-origin设置为top left保持 div 紧贴左上角。

When the div requires scaling, its wrapping div is sized as well. This should allow other content on the page to flow correctly as the browser is resized. If the wrapping div doesn't exist, you can add one dynamically using $.wrap()though it may get 'interesting' figuring out which styles to transfer over to keep the overall layout working smoothly.

当 div 需要缩放时，它的包装 div 也会被调整大小。这应该允许页面上的其他内容在浏览器调整大小时正确流动。如果包装 div 不存在，您可以动态添加一个使用，$.wrap()尽管它可能会变得“有趣”，以确定要转移哪些样式以保持整体布局顺利工作。

Demo FiddleDemo with content

Demo FiddleDemo with content

CSS:

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;
}

Code:

代码：

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 });
});

回答by SwiftNinjaPro

I took the answer from dc5, and put it in a small function that allows you to set the scale based on window.

我从 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)+')';
    }
}

if you want the element to fit, and not get cut off, just change Math.minto Math.max, or just set the fit parameter of this function to true.

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

Minified Version:

缩小版：

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)+')';}}

回答by L00c33

If you need to set this dynamically based on the window, you can set the div to a percentage of available window real-estate too.

如果您需要根据窗口动态设置它，您也可以将 div 设置为可用窗口空间的百分比。

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

回答by Jacob T Waverley

As long as you make the dimensions of the contents % based, then you'll certainly be able to dynamically resize them based on the outer div. Then just use jQuery:

只要您使内容的尺寸基于 %，那么您当然可以根据外部 div 动态调整它们的大小。然后只需使用jQuery：

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