javascript - 以 100% 宽度动态调整 iFrame 的大小

Question

我的站点上有许多来自 Vimeo 的嵌入式 iFrame。我正在重新设计它，需要让它们都适应新设计。

我可以通过将它们全部设置为 100% 宽度来轻松地使宽度适合，但高度都不同...我如何调整它们的大小并保持比例？

谢谢!!

Answer 1

使用 jquery，你可以像这样获取框架的宽度和高度:

w = $("#iframe").width();
h = $("#iframe").height();

利用此信息，您可以计算给定 iframe 的纵横比(比率 = w/h)。然后您可以为每个 iframe 计算新的宽度或高度。我猜你的设计会(固有地)限制每个框架的宽度，所以你也可以使用它作为你的基线 --> newHeight = ratio * maxWidth

现在您有了新的维度，您可以适本地设置它们。