css - CSS 变换比例以创建预览

Question

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

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

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

Answer 1

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