CSS 转换比例以创建预览

Question

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

我正在将其缩小 40%。问题是当我将它缩小 40% 并将它放在它重叠的 200x200 框中时。有没有办法说而不是按百分比缩小它以将其缩小到特定大小？例如，我可以将它缩小到 200x200 吗？

我希望对宽度和高度各不相同的几个 div 执行此操作，并将它们全部放入一个 200x200 像素的框中。我不想使用溢出:隐藏或滚动。

Answer 1

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