有沒有辦法強制使用內在比率來填充元素，以垂直填充其容器？

Question

Sassmeister here

如果一個元素的尺寸使用intrinsic ratio定義：

薩斯：

body, 
html, 
.Wrapper 
{ 
    width:100%; 
    height: 100%; 
} 

.VideoContainer 
{ 
    position: relative; 
    max-width: 100%; 
    height: 0; 
    overflow: hidden; 

    &.Sixteen-Nine { 
    padding-bottom: 56.25%; 
    } 

    &.Four-Three { 
    padding-bottom: 75%; 
    } 
} 

.VideoContainer iframe, 
.VideoContainer object, 
.VideoContainer embed 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

HTML：

<div class="Wrapper"> 
    <div class="VideoContainer Vimeo Sixteen-Nine"> 
    <iframe src="http://player.vimeo.com/video/109777141?byline=0&amp;portrait=0&amp;badge=0&amp;color=090909" class="js-only" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 
    </div> 
</div> 

有什麼辦法來遏制它，這樣它調整到它的容器的高度？

它將在保持其寬高比的同時調整其容器的寬度，但是，即使使用定義明確高度的包裝器，如果包裝器的寬度與其高度相比，它將溢出容器比它的長寬比。

我需要支持IE9 +，我不想使用JavaScript

Answer 1

你能告訴我，如果這是你腦子裏想的是什麼？

.Wrapper 
{ 
    display: block; 
    width: 100%; 
} 

.VideoContainer 
{ 
    position: absolute; 
    height: 100%; 
    display: block; 
    width: 100%; 
    &.Sixteen-Nine { 
    padding-bottom: 56.25%; 
    } 

    &.Four-Three { 
    padding-bottom: 75%; 
    } 
} 

.VideoContainer div 
{ 
    height: 100%; 
} 

.VideoContainer div iframe{ 
    height: 100%; 
    width: 100%; 
} 


<div class="Wrapper"> 
    <div class="VideoContainer Vimeo Sixteen-Nine"> 
    <div> 
     <iframe src="http://player.vimeo.com/video/109777141?byline=0&amp;portrait=0&amp;badge=0&amp;color=090909" class="js-only" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 
    </div> 
</div> 
</div>