如何呈现在较小的iframe一个完整的网页？ [英] How to Render a full webpage in smaller iframe?

问题描述

我有一个定制的内容管理系统。我使用的CKEditor所改动的内容。我想要的网页的实时preVIEW当我点击编辑后提交按钮。我使用的iframe，但它示出了水平和垂直滚动条，因为该网页的尺寸更大。我想这样做在一个特定的维度，即可查看完整的页面渲染意味着网页在一个较小的尺寸。即使是我没有任何problem.Kindly帮助尽快网页的图像。提前致谢。

I have a customized content management system. I'm using CKEditor to change the content. I want a live preview of the webpage when i click submit button after edit. i'm using iframe but it shows horizontal and vertical scroll bars because the webpage is bigger in size. i want to do it in a specific dimension to view a complete page means render the webpage in a smaller size. even it is a image of webpage i don't have any problem.Kindly Help ASAP. Thanks in advance.

推荐答案

我爱 css3please ：

<style type="text/css">
.box_scale {
              width:300px;
             height:300px;
  -webkit-transform: scale(0.5);  /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5);  /* FF3.5+ */
      -ms-transform: scale(0.5);  /* IE9 */
       -o-transform: scale(0.5);  /* Opera 10.5+ */
          transform: scale(0.5);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

</style>

<div class="box_scale">
    <iframe width="300" height="300" src="http://example.org"></iframe>
</div>

除了选择一个规模的唯一的事情就是宽度和高度添加到div。当然，你可能要增加一些规则改变的起源也是如此。另请参阅： https://developer.mozilla.org/en/CSS/transform

这篇关于如何呈现在较小的iframe一个完整的网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！