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

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

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