iframe缩小页面比例
需求：有一个嵌入iframe的网页，在右半边显示，但是右侧是自适应宽高的，直接设置iframe: width:100%; height:100%可以实现这个自适应父元素的功能，但是却出现了，原来的网页太大只能显示局部，那么能不能实现自适应父元素的宽高的前提下，仍能缩小一下页面的比例呢？
首先也是直接去搜素引擎找解决方案，也有收获:
How can I scale the content of an iframe?
上述这两篇博文给了很大的启发，基本的套路就是按这样来的：利用transform:scale(xxx)来进行缩放，而第一篇博文更是指明了，之后再利用position:absolute; top:xx; left:xxx;来对iframe重新定位，但是具体实操起来，发现它们均没有解释的是：
scale要设多少？top,left的取值有依据吗？该怎样取值？
这样实际就用不到自己的项目中...
也有参考其余链接，iframe宽度自适应 并按比例调整高度
于是就只能自己去解决这两个问题：
首先：scale要设多少？
实操中，起初以为，scale就是iframe宽高和父元素宽高的比例，第一篇博文设置的0.55，但却发现1200/1980!=0.55啊，但是stackoverflow的回答中又是...，后自己尝试，因为sacle=0.8的时候，才能的正常的显示较多的内容，于是就暂定为0.8...
其次：top,left的取值有依据吗？该怎样取值？
这一点本来无解，因为我只是在chrome中不断的调整iframe的宽高和top,left值来达到我的电脑上适配并缩放好比例（因为改变宽高也会影响top和left的值），但是在别人的电脑上可能出来不适配的情况，琢磨不透该怎么取值...
解决思路
想了好一会，终于灵光一现: scale(0.8)啊
想一下，假设我们的父元素为800px宽，500px高，那么transfrom:scale(0.8)的情形下，iframe应该为多少呢？
那就是800*0.8=640px，以及500*0.8=400px啊！！！，以草图为例：
另外这里需要注意的细节就是会居中了，说明是以父元素中心来进行的缩放，也是不断的试中发现...
接下来呢？只需要把缩小的iframe宽高设回原来的大小，再利用绝对定位的top,left来进行定位
原来的大小是多大：
由于scale的存在，于是原来的大小就变成了800/0.8=1000和500/0.8=625
top,left取值是多少：
当设置了原来的大小，但没设置top和left的时候，会出现iframe在原来的位置但长度沿着x轴方向延伸了，高度沿着y轴方向延伸了，也即起始点为左上角。
这时候就很好判断了，回顾草图中的0.1，也就是top的取值只需要在原来的大小（1000）上面乘以0.1即是（需要为负），同理left也是如此
iframe.container {
position: absolute;
top: -62.5px; /* 625*0.1 */
left: -100px; /* 1000*0.1 */
width: 1000px; /* 800/0.8 */
height: 625px; /* 500/0.8 */
transform: scale(0.8);
}done!!!
实际示例
宽800，高500，一开始没有scale，设置了width:100%; height:100%也做到了自适应（黑框为父元素），但可以看到显示的有点太大..
加了scale后，因为缩小了0.8的关系可以看到页面文字和图片都缩小了一点，但没有适配父元素：
之后设置好原来的大小（没有设置top,left值），可以看到此时以左上角为原点，长宽均扩展了：
再之后，只需设置top=原来的高度(1000)*0.1，left=原来的宽度(625)*0.1，均是负数：
最后demo显示稍有偏差，可能是此演示网页或者滚动条等导致，略微调整（在实际的项目用的不是这个，基本完美契合的）