我有一个固定的宽度和高度的div标签<div id="preview"></div>
,在预览中我想显示一些html:h1,h2,p,块引用,列表,所有缩小,以便整个html块适合内部预览,完美缩放和比例。我会怎么做呢?谢谢!如何缩小html元素以适合固定大小的div?
2
A
回答
7
使用CSS的zoom
属性:
#preview {
zoom: 0.5;
/* For Firefox */
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
}
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;
}
相关问题
- 1. CSS背景图像 - 缩小以适合固定大小div
- 2. 如何缩小内容以适合div?
- 3. HTML缩小td以适合图像大小
- 4. 有什么办法缩小ascx使其适合固定的div?
- 5. 是否可以调整文本大小以适应固定大小的div?
- 6. 适合大div到小div并保持比例:绝对元素
- 7. 压缩私钥以适应固定大小的字节数组
- 8. HTML元素环绕放大/缩小
- 9. 调整图像大小以适合div
- 10. 图像尺寸,以适应在固定大小的div
- 11. 固定的CSS元素调整大小/缩放到浏览器
- 12. 如何使一个div容器自动适合它在IE11中的固定大小的子元素
- 13. 如何缩小div /节的大小?
- 14. 背景大小不适合元素
- 15. HTML/CSS/JAVASCRIPT - 缩放固定大小的物品以适应流体容器
- 16. 固定大小的容器元素中心图像(CSS,HTML)
- 17. 调整大小时缩小/扩大子元素的大小
- 18. 缩小窗口大小移动元素
- 19. 固定元素的子元素的大小调整不正确
- 20. 固定大小的缩略图像twitpic.com
- 21. 如何确定行的大小以适合vb.net中的datagridview大小
- 22. 如何删除数组中的元素并缩小其大小?
- 23. HTML - 大小div
- 24. 获取HTML元素大小
- 25. IE显示div的大小不合适
- 26. 生成大小适合的随机div
- 27. 固定大小像素字体的Emacs字体大小(以像素为单位)?
- 28. 即使分发固定大小的div
- 29. flex 4:调整SWFLoader元素的大小以适应VGroup元素
- 30. NSStatusItem是否可以缩小以适合?
请出示我们你的HTML,最好是[现场演示](http://jsfiddle.net/)。解释你遇到的困难,以及你想要的东西,你似乎没有得到。 – 2012-08-03 23:11:21
从问题中可以清楚地知道他在问什么。现场演示很好,但不是必需的。 – ash 2012-08-03 23:13:49