Есть ли какой-либо способ заставить элемент, используя внутреннее соотношение, заполнить его контейнер вертикально, а также горизонтально?

Question

Sassmeister here

Если размеры Элементом в определяются с помощью intrinsic ratio:

Sass:

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>