在做代码生成器时,有种业务场景,就是在一个小的页面下预览 生成的页面效果(预览的页面比较大),这个时候需要等比例缩小显示。
先上个图
这里是代码:
<!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;样式进行定位,将实体部分定位到想要展示的地方;
然后就可以了。