尺寸差異javascript transform：scale（？。？）

Question

使用javascript來計算;我如何使用transform：scale（w，h）;得到這個div來縮放以適應其父容器？

我是在學校的特殊數學小組，所以我不確定我在使用Google搜索（比例，長度比較，比例，分數？），因爲我們從來沒有學過這些東西（也許一兩天）。

<div id="container"style="width:164px;height:164px:"> 

    <div id="square_of_unknown_size"> I want to always fill my parent </div> 

</div> 

編輯：順便說一句，我不希望使用寬/高：100％，因爲我有一個適合這樣的話，我真的需要放大的正方形內的圖像。

這似乎向內縮小到微觀層面：

'-webkit-transform':'scale('+$('#container').width()+'.'+$('#square_of_unknown_size').width()+','+$('#container').height()+'.'+$('#square_of_unknown_size').height()+')' 

PX一個比較B PX得到AB =總是適合

Answer 1

你要計算兩個div之間的比例：

var scaleX = $('#container').width()/$('#square_of_unknown_size').width(); 
var scaleY = $('#container').height()/$('#square_of_unknown_size').height(); 
$('#square_of_unknown_size').css('-webkit-transform', 'scale(' + scaleX + ',' + scaleY + ')');