按比例缩放以适合容器内部

Question

我有#fixed-div和#resize-div，尺寸如下：

＃fixed-div

=> width :: 550px;
=> height:: 450px;

并且＃resize-div 是动态的。

现在，我想将#resize-div的缩放css应用到#fixed-div内，如上图所示。

我试图计算#resize-div的缩放值，假设我是#resize-div的以下维度：

=> width :: 650px;
=> height:: 1100px;

那么，你如何计算比率呢？ （它花了我大约3天但仍然无法理解我该怎么办？）

请帮助我。

Answer 1

var ratioX = biggerX / smallerX;
var ratioY = biggerY / smallerY;

if (ratioX > ratioY) {
    var zoom = ratioX;
} else {
    var zoom = ratioY;
}

然后将zoom属性设置为元素：

$('.inner').css({
    'transform': 'scale('+zoom+','+zoom+')' //remember to use vendor prefixes
});

您需要在内部

上设置transform-origin: 0% 0%;