前端实现 iframe 等比例缩放显示页面

在做代码生成器时，有种业务场景，就是在一个小的页面下预览 生成的页面效果（预览的页面比较大），这个时候需要等比例缩小显示。

先上个图

这里是代码：

实现的思路是：

1）transform:scale(0.55); 进行等比例缩放；

2）为iframe 设置一个父标签，由于iframe 本身高宽比较大，因此父标签 加上  overflow: hidden; 去除滚动条；

3）父标签 加上 position: relative; 样式进行定位封闭；

4）iframe 添加 position: absolute;left: -400px;top: -170px;样式进行定位，将实体部分定位到想要展示的地方；

然后就可以了。