【发布时间】：2011-09-01 22:01:46
【问题描述】：
我的网站上有许多来自 Vimeo 的嵌入式 iFrame。我正在重新设计它，需要使它们都适合新设计。
我可以通过将它们全部设置为 100% 宽度来轻松地使宽度适合，但是高度都不同...如何重新调整它们的大小并保持比例？
谢谢！！
【问题讨论】：
标签： javascript jquery css iframe vimeo
【发布时间】：2011-09-01 22:01:46
【问题描述】：
使用 jquery，您可以通过以下方式获取框架的宽度和高度：
w = $("#iframe").width();
h = $("#iframe").height();
利用这些信息，您可以计算给定 iframe 的纵横比（比率 = w/h）。然后您可以为每个 iframe 计算新的宽度或高度。我猜你的设计会（本质上）限制每帧的宽度，所以你不妨将它用作你的基线 --> newHeight = ratio * maxWidth
现在您有了新的尺寸，您可以适当地设置它们。
【讨论】：
为什么要将视频宽度设置为 100% 而不仅仅是视频的实际宽度？
我想，在编写每个 iframe 元素之前，您可以：
使用 Vimeo API 获取每个视频的高度和宽度，例如http://vimeo.com/api/v2/video/8564338.json.
将 iframe 的高度设置为
videoHeight * window.innerWidth / videoWidth（或类似的东西！）
对我来说看起来很 hacky...
【讨论】：
-
谢谢！好吧，我这样做的原因是因为我正在设计一个移动主题，以及一个响应式主题，事后。所以我需要在某个点宽度为宽度的 100%。但是一旦我这样做了，我就需要开始弄乱高度了。