縮放比例，以適應在容器內部

Question

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

＃固定的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; 
} 

，然後你變焦屬性設置爲元素：

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

你需要設置transform-origin: 0% 0%;內一個