这种复杂的iframe自适应如何做

Question

♣ 先说前提：

• 在响应式下要求引用站外的iframe自适应其父窗口的大小。
• 引用的站外iframe的宽度和高度是一固定值。

♣ 探讨：

先拿一个实物来说事吧！

比如下面这个iframe

<iframe frameborder="0" width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=j0187bxjv1k&tiny=0&auto=0" allowfullscreen></iframe>

其宽和高分别是640和498，此iframe放在一div中，该div容器的宽度是100%它会随播放屏幕大小不同而变化。此时问题来了，因为iframe的宽高是一固定值，所以有时大于容器，有时小于容器。如何解决随容器大小的改变,iframe正好撑满容器中呢？

当然，重置一下iframe的宽和高是必须的，如iframe----->width:100%；可此时问题来了，高度的大小如何配置呢？当然用js来控制。

这里还有一个探讨问题的前提，那就是本题用js原生探讨而不用类jquery这些框架。

Answer 1

能用css干嘛用jq，搞不懂

Answer 2

你好象喜欢讨论前提，而我关心的是前提下解决问题的思路！

Answer 3

回复
因为我没看懂你的问题到底是啥，响应式不外乎两招终极绝招，媒体查询和resize事件，你都试试呗。如果这俩都搞不定，那就是天坑了。

Answer 4

反正我也没太看懂需求，只能跟你讲一句话，用jquery能写出来，用原生肯定能写，只是有时候会麻烦点，所以你那个前提毫无意义。

还有就是，楼上那个display: flex是CSS，跟啥jquery都没关系。

Answer 5

如果是跨域的iframe，是做不到的，因为浏览器有同源策略，不是同一个源的，会有安全性限制。

Answer 6

不是说了吗，用原生！

Answer 7

display:flex可以做到