前端实现iframe响应式布局，让网页等比例缩放

在项目开发中，有一种业务场景，很让人头疼，如何实现iframe响应式布局？

简单说， 就是有这样一个需求，在一个小的页面下嵌套另一个网页，并且让所嵌套的网页以缩小的形式呈现，这种情况下应该怎么实现？

初用iframe是下面的效果

<div class="box">
        <iframe 
            width="600" 
            height="420" 
            scrolling="yes"
            src="https://www.csdn.net/" 
            frameborder="0"
            >
        </iframe>
    </div>

效果如下：

iframe实现响应式缩放实现思路

1.给iframe添加一层父元素，父元素设置相对定位和溢出隐藏
2.子元素加绝对定位，并设置页面缩放比例
3.调整子元素大小，移动子元素位置，使之与父元素贴合

<style>
        .box {
            position: relative;
            overflow: hidden;
            width: 600px;
            height: 420px;
            margin: 0 auto;
            border: 1px solid black;       
        }
        
        iframe {
            position: absolute;
            transform: scale(0.4);
            left: -480px;
            top: -310px;
        }
    </style>

<div class="box">
        <iframe 
            width="260%" 
            height="250%" 
            scrolling="yes"
            src="https://www.csdn.net/" 
            frameborder="0"
            >
        </iframe>
    </div>

效果如下

缩放的比例，页面的大小都是可以根据需求调整的，so easy！