0

後の段階でA4として印刷されるように設計されたhtml div（ページ）を表示するモジュールを構築しています。ただし、これらの div が表示される領域は、div の全幅を表示するには小さすぎるため、ページとそのコンテンツを縮小して表示領域に収まるようにする必要があります。

a4 ページの子は、設定された幅/高さとパーセンテージの両方でスタイル設定されているため、CSS3 変換スケールを使用してページを表示できるように十分に縮小するのは良い方法ですが、スケールがレンダリング後に行われるため、ページの周りに白い領域が作成されます。

ウィンドウのサイズが変更されたときにページを再スケーリングするためにjqueryを使用しており、ページがロードされたときにもこれを実装します。

共通のラッパー内で複数の div をスケーリングし、親を再調整して、スケーリングされた div がパディングなしで表示されるようにするにはどうすればよいですか?

編集:問題を表示する簡単なフィドルをまとめましたhttp://jsfiddle.net/96jkU/

#toBeScaledの幅全体に表示する必要があります#displayAreaが、それでもスケーリングされます0.5

4

1 に答える 1

2

私が質問を正しく理解していれば、スケーリングされた div を親 div の左上隅に配置する必要があります。
その場合、問題は変換原点が50% 50%デフォルトで に設定されていることです。これは回転には適していますが (通常、中心を中心に何かを回転させたい場合)、実際にはスケーリングには適していません。あなたのdivは、元の場所の中心に縮小されます。

解決策：追加するだけです

transform-origin:0 0;

(適切な接頭辞を付けて) のスタイルに追加し#toBeScaledます。

更新された fiddleを参照してください。

于 2013-09-29T09:07:11.817 に答える