1

私が取り組んでいるシステムは、請求書といくつかのドキュメントを HTML 形式で生成します。

誰かがこのドキュメントを検索すると、結果はドキュメントの小さなプレビューとともに表示される必要があります。クライアントは、html ドキュメントを div 内に表示することを望んでいます (この div は実際のドキュメント サイズよりもはるかに小さいことに注意してください)。私が達成しようとしているのは、div 内に html を表示することであり、コンテンツは div のサイズ。

div 内で html をレンダリングすると、スクロールバーが追加されて元のサイズで表示されます。html コンテンツを div のサイズに合わせたいと思います。

含まれている div 内の要素のフォント、幅、高さを変更する CSS シートで作業しましたが、実際にはすべてのドキュメントの html 構造にパターンがないため、結果は期待どおりではありません。おそらくjavascriptまたはjqueryプラグインを使用して、これを行うためのよりクリーンな方法があるかどうか疑問に思います。

4

1 に答える 1

3

scalediv で使用できます。これにより、その中のすべてが縮小されます。

http://www.w3.org/TR/css3-transforms/は、すべての CSS 変換のリファレンスです。ちょっとやり過ぎに見えますが、スケールだけを説明しているW3Cのページはないようです。

とにかく、使用できる CSS は次のようなものです。

.preview {
    width:600px; height:400px;
    -webkit-transform:scale(.25);
    -ms-transform:scale(.25);
    transform:scale(.25);
    -webkit-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
    border:4px solid green;
    margin:0 0 -300px 0;
}

結果はhttp://jsfiddle.net/asxqL/4/のようになります

ここでは、ほとんどの測定値が 0.25 倍されていますが (たとえば、4px の境界線は 1 ピクセル幅として出力されます)、要素が占める垂直方向のスペースは依然として 400 ピクセルであることに注意してください。そこで、-300px の下余白が必要になります。

于 2013-07-12T07:27:01.647 に答える