Question

我尝试在网页上调整iframe的大小，但只是宽度变大了。我添加的CSS是：

iframe {

  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;

}

但这只会调整宽度。我怎样才能调整高度以保持YouTube视频的属性？我是否还需要调整周围组件的大小？ HTML是

 <div class="abstract">
          <div class="abstract-inner">

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

          </div>
          </div>

Answer 1

＆＃13;

.abstract{

    max-width: 700px;/*for example*/

}
.abstract-inner {
    position: relative;
    padding-bottom: 56.25%; /*288/512=0.5625*/
    height: 0;
    overflow: hidden;
}
.abstract-inner iframe{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

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

＆＃13;

如何调整iframe的大小以保持比例？

1 个答案: