如何缩小html元素以适合固定大小的div？

我有一个固定的宽度和高度的div标签<div id="preview"></div>，在预览中我想显示一些html：h1，h2，p，块引用，列表，所有缩小，以便整个html块适合内部预览，完美缩放和比例。我会怎么做呢？谢谢！如何缩小html元素以适合固定大小的div？

来源

2012-08-03 dave

请出示我们你的HTML，最好是[现场演示]（http://jsfiddle.net/）。解释你遇到的困难，以及你想要的东西，你似乎没有得到。 – 2012-08-03 23:11:21

从问题中可以清楚地知道他在问什么。现场演示很好，但不是必需的。 – ash 2012-08-03 23:13:49

使用CSS的zoom属性：

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

来源

2012-08-03 23:11:26 ash

更多的研究后，它似乎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; 
}

来源

2012-08-10 14:01:42 dave

如何缩小html元素以适合固定大小的div？

回答

相关问题