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

标签 javascript jquery css iframe vimeo

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

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

谢谢!!

最佳答案

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

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

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

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

关于javascript - 以 100% 宽度动态调整 iFrame 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7277063/

相关文章:

javascript - 如何在 Jasmine Test 中访问指令的范围

javascript - jquery 切换播放/停止图标背景

css - TinyMCE 表格边框行距问题

html - CSS伪元素定位问题

javascript - jQuery clone() 附加到多个元素而不是仅一个元素

javascript - 克隆函数实现中 ' this '关键字的执行上下文

javascript - ES6 类多重继承

javascript - 拖放网格并具有推送效果

javascript - 确保时钟显示 12 :01 rather than 0:01

javascript - 在 javascript 或 jQuery 中将字符串解码为有效的 JSON