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

Question

I have a div tag <div id="preview"></div> with a fixed width and height, and in the preview I'd like to display some html: h1, h2, p, block quotes, lists, all shrunk down so the entire chunk of html fits inside the preview, perfectly scaled and proportioned. How would I go about it? Thanks!

Answer 1

Use CSS's zoom property:

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

Answer 2

After more research it seems that the iframe is more appropriate for displaying html: instead of supplying an external link to a web page, you can load the iframe with raw html directly. Also you can embed a stylesheet in the iframe and the stylesheet won't affect the rest of your site. Perfect for themes. You can see the 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;
}​