html - 有什么方法可以强制使用固有比率大小的元素垂直和水平填充其容器？

Question

萨斯迈斯特在这里

如果使用固有比率定义元素的尺寸：

萨斯：

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>