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

最新推荐文章于 2024-06-20 14:47:31 发布

keep-go-on

最新推荐文章于 2024-06-20 14:47:31 发布

阅读量4.1w

点赞数 12

分类专栏： web 前端文章标签： iframe 缩放

本文链接：https://blog.csdn.net/qq_26462567/article/details/85252156

版权

web 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

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

先上个图

这里是代码：

<!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;样式进行定位，将实体部分定位到想要展示的地方；

然后就可以了。