Html 如何在保持纵横比的情况下放大iframe？

我试图放大嵌入的youtube视频，但它没有调整大小。我该怎么做？我的HTML是

<div class="mainContent post ">

            <div class="paragraphs">

                    <div class="post-content"><div class="post-content-inner"><iframe width="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></div>

            </div>
        </div>

---

你能帮我放大iframe以填充div吗？

好的，iframe采用父div的大小。如果顶部父div变大，iframe也会变大。因此，如果将主内容设置为特定大小，并在子div上使用百分比，则应相应调整其大小。您只需更改css中主要内容的宽度，即可在此小提琴中检查它：

---

希望能有所帮助。

您可以制作一把小提琴来准确地演示您的意思吗？谢谢，但是当父窗口缩小时，是否可以使视频的大小也缩小？此解决方案可用于放大视频，但如果窗口缩小，则无法缩小视频。也许这是另一个与我原来的问题不同的问题。如果你减小主要内容的宽度，视频也会缩小。我以为这就是你想要的。也许最好给出一个你想要的例子。我把它放在一页上，但不放在这一页上，因为它太复杂了。我不知道如何将父div的大小设置为relative。视频变得太小（默认大小），或者当页面缩小时，视频变得太大，并被剪辑到视频的右侧。我不知道为什么这不容易，我认为fluid 7 responsive的整个设计完全是一团糟，使得一些事情变得非常简单和困难。

.mainContent{

    max-width: 700px;/*for example*/

}

.paragraphs{

    max-width: 700px;/*for example*/

}

.post-content{

    max-width: 700px;/*for example*/

}
.post-content-inner {
    position: relative;
    padding-bottom: 56.25%; /*288/512=0.5625*/
    height: 0;
    overflow: hidden;
}
.post-content-inner iframe{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.mainContent{

    width: 1200px;/*modify here for resize*/

}

.paragraphs{

    width: 100%;/*!*/

}

.post-content{

    max-width: 100%;/*!*/

}
.post-content-inner {
    position: relative;
    padding-bottom: 56.25%; /*288/512=0.5625*/
    height: 0;
    overflow: hidden;
}
.post-content-inner iframe{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}