html - 响应式 html，具有固定的纵横比和屏幕填充

Question

我正在尝试创建一个响应式网页，固定比例为 16x10。 到目前为止，下面的代码有效。我目前唯一的问题是当宽度变得太大时，需要滚动页面。

所需的行为是页面将填满浏览器窗口，不会在任何方向上被裁剪，同时保持所需的比例。

谢谢!

我的 HTML 片段:

 <div id="wrapper">
    <div id="innerContent">
        <div id="header">...</div>
        <div id="menuBar">...</div>
        <div id="content">...</div>
    </div>
</div>

我的 CSS 片段:

body {
    margin: auto;
    box-sizing:border-box;
}
#wrapper{
    margin: 0 auto;
    padding: 5vw;
    text-align: center;
}
#innerContent{
    padding: 2vw;
}
#header {
    position: relative;   
    height: 7vw;
}
#menuBar {
    width: 100%;
    height: 5vw;
}

#content {
    height: 36vw;
    width: 100%;
    position: relative;
}

Answer 1

这听起来像是一个糟糕的设计，所以我会尝试说服客户以不同的方式来做。

如果失败，您可以使用类似的技术来获得固定比例的图像和视频。您将高度设置为 0 并添加等于百分比的填充。填充计算为宽度的百分比。

#wrapper {
  height: 0;
  padding-bottom: percentage(10/16);
  background: rgba(0,0,0,0.2);
  position: relative;
  z-index: 0;
}

#innerContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
}

http://codepen.io/jaycrisp/pen/obPgYe

注意:这个计算使用了一个sass函数