保持窗口调整大小的宽高比​​：灵活布局，最大和最小尺寸

Question

说我想要下面的布局。

我想使布局灵活，以便在窗口调整时调整大小，但容器div保持其纵横比。我希望容器也有最大和最小尺寸。

• 宽高比：16：9
• 分钟：1280x720
• 最大：1920x1080

出于测试目的，我一直在使用：

• 最低：640x360
• 最大：1280x720

我希望容器div始终垂直居中。

如果您熟悉在4：3电视上播放16：9电影的“信箱”，那就是我想要的效果。

我正在寻找解决方案和彻底解释。

这是我到目前为止的一个方面：http://jsfiddle.net/4qS7m/9/

谢谢！

---

• 我找到了一个保持宽高比的解决方案：http://alistapart.com/d/creating-intrinsic-ratios-for-video/example2.html
• 我还添加了最大/最小尺寸。

TODO ：

• 垂直居中主div

---

布局：

HTML ：

<div class="wrapper-with-intrinsic-ratio">
  <div class="element-to-stretch">
    <div id="main-left">
        <div id="header-logo"></div>
        <div id="content"></div>
    </div>

    <div id="main-right">

    </div>
  </div>
</div>

CSS ：

* { margin: 0; padding: 0; }

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

.wrapper-with-intrinsic-ratio {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.element-to-stretch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  min-width: 640px;
  min-height: 360px;

  max-width: 1280px;
  max-height: 720px;
}

#main-left {
  background: red;
  width: 38.2%;
  height: 100%;
  float: left;
}

#header-logo {
  height: 20%;
  width: 100%;
  background: green;
}

#content {
  height: 80%;
  width: 100%;
  background: pink;
}

#main-right {
  background: blue;
  width: 61.8%;
  height: 100%;
  float: left;
}