我有<div id="preview"></div>
一个固定宽度和高度的 div 标签,在预览中我想显示一些 html:h1、h2、p、块引号、列表,所有这些都缩小了,所以整个 html 块都适合预览,完美的比例和比例。我该怎么办?谢谢!
问问题
3639 次
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:您可以直接使用原始 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 回答