html - 缩放 div 和内容以适应

Question

我正在构建一个模块来显示 html div（页面），这些 div（页面）被设计为在稍后阶段打印为 A4。然而，显示这些 div 的区域太小，无法显示 div 的整个宽度，因此页面及其内容需要按比例缩小以适应手头的显示区域。

a4 页面的子级设置了宽度/高度和百分比的样式，因此使用 CSS3 Tranform 比例将页面缩小到足以显示它们将是一个很好的方法，但这会成为问题，因为比例在渲染后完成，从而在页面周围创建一个白色区域。

我正在使用 jquery 在调整窗口大小时重新缩放页面，并且在加载页面时也将实现这一点。

如何在一个通用包装器中缩放多个 div 并重新调整父级，以便显示缩放后的 div 周围没有任何填充？

编辑：我整理了一个简单的小提琴来显示问题http://jsfiddle.net/96jkU/

#toBeScaled应该显示在整个宽度上，#displayArea但仍会缩放到0.5

score 2 · Accepted Answer

如果我正确理解了这个问题，您希望缩放的 div 位于父 div 的左上角。
在这种情况下，问题是转换原点50% 50%默认设置为。这适用于旋转（您通常希望围绕其中心旋转某些东西），但不适用于缩放；你的 div 被缩小到原来的中心。

解决方案：您需要做的就是添加

transform-origin:0 0;

（带有适当的前缀）到样式的#toBeScaled.

1 回答 1