Question

我有一个自定义的内容管理系统。我正在使用CKEditor来更改内容。我想在编辑后单击“提交”按钮时实时预览网页。我正在使用iframe，但它显示水平和垂直滚动条，因为网页的大小更大。

我想在特定维度中执行此操作以查看完整页面意味着以较小的尺寸呈现网页。即使它是网页的图像，我也没有任何问题。

Answer 1

<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中呈现完整的网页？

1 个答案: