在做代码生成器时，有种业务场景，就是在一个小的页面下预览 生成的页面效果（预览的页面比较大），这个时候需要等比例缩小显示。
先上个图
这里是代码：
<!DOCTYPE HTML>
<html>
<body>
<style>
.iframe-body-sty{position: relative;overflow: hidden;height:600px;width: 1200px;background-color: red;}
.iframe-body-sty>#iframe-shrink{position: absolute;transform:scale(0.55);left: -400px;top: -170px;}
</style>
<div class="iframe-body-sty">
<iframe id="iframe-shrink" src="https://www.baidu.com/" width="1920px" height="920px"></iframe>
</div>
</body>
</html>实现的思路是：
1）transform:scale(0.55); 进行等比例缩放；
2）为iframe 设置一个父标签，由于iframe 本身高宽比较大，因此父标签 加上 overflow: hidden; 去除滚动条；
3）父标签 加上 position: relative; 样式进行定位封闭；
4）iframe 添加 position: absolute;left: -400px;top: -170px;样式进行定位，将实体部分定位到想要展示的地方；
然后就可以了。