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

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;

那么，你会如何计算这里的比率。 (我花了大约三天的时间，但还是不明白我该怎么办？)

请帮助我解决这个问题。

Answer 1

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

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

然后将缩放属性设置为元素:

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

您需要在内部设置 transform-origin: 0% 0%;