缩放，使其合适

Question

因此，我在我的网站中使用一个网站来显示一个视频，我把它放在div中，以便在移动屏幕上调整大小，并使它更有响应性等等。然而，现在，如果显示器很小，iFrame下面的内容就会被切断。

下面是iframe的代码：

<div class="wrapper">
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<style>
.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

如果有人能看到任何可能导致这种行为的东西，那么我很想知道。

谢谢

编辑:这是我试图缩放的div的代码。宽度不会随着页面的缩小而改变，因此高度也不会改变。有什么想法吗？

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Answer 1

问题是包装器div .splash-page .main-wrap设置为position: absolute;和overflow-y: hidden;，这不允许div增长以适应所有内容。

如果您将CSS更改为包括以下内容：

.splash-page .main-wrap {
  overflow-y: visible;
  position: relative;
}

它将允许div增长以适应您的所有内容。

如果您只想以特定的宽度为目标，也可以将整个过程封装在媒体查询中。

@media all and (min-width: 1001px) {
  ...
}

目前，您还会遇到一个重复的背景问题，因为您在div和body标记上都使用了.wsite-background。如果从body标记中删除这个类，它应该看起来更好。

Answer 2

你的iframe有一个固定的。尝试使用width="100%“代替width="960”