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

Question

Засмейстер здесь

Если размеры элемента определены с использованием внутреннего отношения:

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>