我正在构建一个模块来显示 html div(页面)，这些页面旨在在稍后阶段打印为 A4 纸。然而，显示这些 div 的区域太小，无法显示 div 的整个宽度，因此需要按比例缩小页面及其内容以适应手头的显示区域。
a4-pages 的子页面的样式设置了宽度/高度和百分比，因此使用 CSS3 Tranform scale 将页面缩小到足以显示它们将是一个很好的方法，但这会成为问题因为缩放是在渲染之后完成的，因此会在页面周围创建一个白色区域。
我正在使用 jquery 在调整窗口大小时重新缩放页面，并且在加载页面时也会执行此操作。
我如何在一个公共(public)包装器中缩放多个 div 并重新调整父级以便显示缩放后的 div 周围没有任何填充？
编辑:我整理了一个简单的 fiddle 来显示问题 http://jsfiddle.net/96jkU/
#toBeScaled 应显示在 #displayArea 的整个宽度上，但仍会缩放到 0.5
最佳答案
如果我对问题的理解正确，您希望缩放后的 div 位于父 div 的左上角。
在这种情况下，问题是转换原点默认设置为 50% 50%。这对旋转很有用(你通常想围绕它的中心旋转一些东西)但实际上对缩放不是很好；你的 div 被缩小到它原来所在的中心。
解决办法:只需要添加
transform-origin:0 0;
(使用适当的前缀)到 #toBeScaled 的样式。
参见 updated fiddle .
关于html - 缩放 div 和内容以适应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19072625/