2

幅と高さが固定された div タグ<div id="preview"></div>があり、プレビューでいくつかの html を表示したいと思います: h1、h2、p、ブロック引用符、リスト、すべて縮小して、html のチャンク全体がプレビュー内に収まるようにします。完璧なスケールとプロポーション。どうすればいいですか？ありがとう！

4

2 に答える 2

7

CSS のzoomプロパティを使用します。

#preview { 
    zoom: 0.5; 
    /* For Firefox */
    -moz-transform: scale(0.5); 
    -moz-transform-origin: 0 0;
}
于 2012-08-03T23:11:26.950 に答える
0

さらに調査した結果、iframe は html を表示するのにより適しているようです。Web ページへの外部リンクを提供する代わりに、生の html を使用して iframe を直接ロードできます。また、iframe にスタイルシートを埋め込むこともできます。スタイルシートはサイトの残りの部分には影響しません。テーマに最適です。ここでjsfiddleを見ることができます。

HTML

<textarea id="editor"><p>This is plain html to keep it simple. In my 
application, this would be Markdown text and converted to html by a 
Markdown converter in javascript.</p></textarea>

<iframe id="preview"></iframe>​​​

JavaScript

var html = document.getElementById('editor').value;
head = '<style type="text/css">#inner {color: blue; margin: auto; zoom: 0.6; -moz-transform: scale(0.6); -moz-transform-origin: 0 0;}</style>';     
var body = '<div id="inner">' + html + '</div>';
var preview = document.getElementById('preview').contentWindow.document;
preview.head.innerHTML = head;
preview.body.innerHTML = body;​

CSS

#editor, #preview {
    height: 300px;
    width: 200px;
}

textarea {
    resize: none;
}​
于 2012-08-10T14:01:42.117 に答える