Question

使用javascript计算;我如何使用transform：scale（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>

编辑：顺便说一句，我不想使用宽度/高度：100％，因为我在广场内有一个像这样的图像，所以我真的需要缩放。

这似乎向内缩小到微观层面：

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

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

大小差异javascript变换：规模（？。？）

1 个答案: