css - 在调整窗口大小时保持纵横比：灵活的布局，具有最大和最小尺寸

Question

说我想要下面的布局。

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

• 纵横比：16:9
• 最小：1280x720
• 最大：1920x1080

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

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

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

如果您熟悉 16:9 电影在 4:3 电视上显示的“信箱”，那么这就是我想要的效果。

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

这是我到目前为止所拥有的 jsfiddle：http: //jsfiddle.net/4qS7m/9/

谢谢！

---

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

待办事项：

• 垂直居中主 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;
}