CSS变换缩放以创建预览

Question

我正在尝试使用其中的内容缩放div以适合200x200的框。基本上我想通过在较小的div中显示其内容来进行更大div的“预览”。

我缩减了40％。问题是当我将其缩小40％并将其放置在重叠的200x200盒子中时。有没有办法说而不是按百分比缩小它以将其缩小到特定大小？比如我可以将它缩小到200x200吗？

我希望这样做几个宽度和高度不同的div，并将它们全部放入一个200x200像素的盒子里。我不想使用overflow：hidden或scroll。

Answer 1

我认为您需要使用javascript执行此操作。等待加载div的所有内容（包括图像），使其达到最终大小。然后你需要获得宽度和高度，使用jquery或getBoundingClientRect（如果你使用css-transforms比这个方法应该可用）并计算比例因子，你应该考虑在哪里检查是否使用div的宽度或高度来计算因子。这意味着您应该考虑div的宽高比和它应该适合的所需大小。最后，您可以通过javascript将值设置为样式。