有什么方法可以强制使用本征比调整大小的元素垂直和水平填充容器？

Question

Sassmeister here

If an element's dimensions are defined using an 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>

Is there any way to contain it so that it resizes to the hight of its container?

It will currently resize to the width of its container while maintaining its aspect ratio, however, even with a wrapper that defines an explicit height, it will overspill the container if the width of the wrapper compared to its height is greater than its aspect ratio.

I need to support IE9+ and I don't want to use JavaScript

Answer 1

can you tell me if this is what you had in mind?

.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>