如何在保持比例的情况下调整 iframe 的大小？答案

【问题标题】：How can I resize my iframe keeping the ratio?如何在保持比例的情况下调整 iframe 的大小？
【发布时间】：2015-05-29 08:15:30
【问题描述】：

我尝试在我的网页上调整 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>

【问题讨论】：

标签： css iframe youtube

【解决方案1】：

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

<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>

【讨论】：