Question

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

a4页面的子节目设置了宽度/高度和百分比两种设置，因此使用CSS3 Tranform缩放比例缩小页面以便显示它们是一个不错的方法，这样就可以显示它们但是这会成为问题因为缩放是在渲染后完成的，因此会在页面周围创建一个白色区域。

我正在使用jquery在调整窗口大小时重新缩放页面，并且在加载页面时也会实现此目的。

如何在一个公共包装器中缩放几个div并重新调整父级，以便显示缩放的div而没有任何填充？

编辑：我把一个简单的小提琴放在一起显示问题http://jsfiddle.net/96jkU/

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

Answer 1

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

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

transform-origin:0 0;

（带有正确的前缀）到#toBeScaled的样式。