如何调整我的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>