iframe下内容自适应缩放

日常开发中，我们可能需要在项目中某个位置嵌入别人的网页时，会使用到iframe。但是如果iframe中的源网页没有做屏幕自适应的话，iframe与网页大小不一致会导致iframe窗口中仅展示一部分的网页内容。在已知源网页的宽高的情况下，怎么做到等比例缩放源网页的内容在iframe中全部展示呢？

源网页：

直接使用iframe嵌入只展示一部分：

解决后：

解决方法：在已知iframe中的源网页的宽高的情况下，将iframe的宽高设置为跟源网页页面宽高一样的大小，使整个网页显示在iframe中，之后使用css3的transform属性中的scale()对iframe做等比例的缩放，配合使用transform-origin来设置缩放的基准点，使其显示在iframe的父级框内。

<div class="iframe-box">
    <iframe class="iframe" src="" style="width: 1920px; height: 937px;transform-origin: left top; transform: scale(0.535, 0.525)"></iframe>
</div>

不积跬步，无以至千里；不积小流，无以成江海。