如何缩小html元素以适应固定大小的div?

时间:2012-08-03 23:07:09

标签: javascript html css

我有一个固定宽度和高度的div标签<div id="preview"></div>,在预览中我想显示一些html:h1,h2,p,块引号,列表,所有缩小所以整个大块的html适合预览,完美缩放和比例。我该怎么办呢?谢谢!

2 个答案:

答案 0 :(得分:7)

使用CSS的zoom属性:

#preview { 
    zoom: 0.5; 
    /* For Firefox */
    -moz-transform: scale(0.5); 
    -moz-transform-origin: 0 0;
}

答案 1 :(得分:0)

经过更多研究后,似乎iframe更适合显示html:您可以直接使用原始html加载iframe而不是提供网页的外部链接。您还可以在iframe中嵌入样式表,样式表不会影响您网站的其余部分。完美的主题。你可以看到jsfiddle here.

<强> 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;
}​