如何在屏幕宽度的33％内制作iframe？

Question

我在<td>元素中有一个I帧。我想动态缩放iframe，以便它占据屏幕33%的{​​{1}}（并自动修复width）。

当我尝试这个时：

height

它只占用<iframe src="google drive presentation url" frameborder="0" width="33vw" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> 元素的33%（其中也包含文本）。

此外，我尝试使用<td>，但这也无效。

我该如何解决这个问题？

Answer 1

您必须使用CSS代替width。

body {
  margin: 0
}
td {
  width: 33.3%;
  background: red
}
iframe {
  width: 100%
}

<table>
  <tr>
    <td>
      <iframe src="google drive presentation url" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </td>
    <td>
      Foo Bar
    </td>
    <td>
      Foo Bar
    </td>
  </tr>
</table>

Answer 2

你支持IE9之前的任何东西吗？你能用vw units吗？

（粗略）想法的

Here is a JSFiddle。底部的<div>元素用于测量/比较。