在页面使用iframe加载来自其他域名的内容,由于包含iframe的父级框长宽固定,如何使iframe里的内容自适应缩放并且居中显示,而不是只显示一部分(左上角),求如何做到? Ps:iframe里的内容是动态改变src来加载的,里面的内容可能是img, swf或是文字,但长宽可知。
在页面使用iframe加载来自其他域名的内容,由于包含iframe的父级框长宽固定,如何使iframe里的内容自适应缩放并且居中显示,而不是只显示一部分(左上角),求如何做到? Ps:iframe里的内容是动态改变src来加载的,里面的内容可能是img, swf或是文字,但长宽可知。
<iframe id="iframe" src="xxx" width="100%" height="850px" frameborder="no" border="0" style="border: none;display: block;margin: 0 auto;"></iframe>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
这个iframe缩放的问题暂时解决了: 由于知道父级框和iframe的大小(宽高),可以直接设置iframe的width和height为其实际的大小,再根据父级框的大小计算iframe的缩放比例,之后使用CSS3的transform的scale()缩放整个iframe,使其显示在父级框内,由于IE8以下不支持transform属性,可以使用filter替代。这里需要注意在使用transform属性时需要配合使用transform-origin来设置缩放的基准点。 以上就是我自己关于iframe内容自适应缩放的解决办法。