大小之间的区别 javascript transform:scale(?.?)

Question

使用javascript计算；如何使用变换：缩放（w，h）；让这个 div 缩放以适应其父容器？

我在学校参加特殊的数学小组，所以我不确定我在谷歌上搜索的是什么（比率、长度比较、比例、分数？），因为我们从来没有学过这些东西（可能一两天）。

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

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

</div>

编辑：顺便说一句，我不想​​使用 width/height:100%，因为我在正方形内有一个像这样合适的图像，所以我真的需要缩放。

这似乎是向内放大到微观层面：

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

px A 比较 B px 得到 A.B = 总是合适

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