如何在保持长宽比的情况下放大框架?

Question

我试着放大我嵌入的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>

我的CSS是不工作的

.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%;
}

你能帮我把iframe放大来填满div吗?

Answer 1

iframe取父div的大小。如果父div变大，iframe也变大。因此，如果您将主要内容设置为特定的大小，并在子div上使用百分比，它应该相应地调整大小。你可以通过在css中改变maincontent的宽度来检查它:http://jsfiddle.net/rwybp41e/8/

.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%;
}

希望能有所帮助。