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

希望它有所帮助。

如何放大我的iframe保持纵横比？

1 个答案: