縮放divs和內容以適合

Question

我正在構建一個模塊來顯示html divs（頁面），這些html divs被設計爲在以後的階段被打印出來作爲A4s。然而，顯示這些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。

請參閱updated fiddle。