响应式设计，包含2个元素

Question

我正在开发一个具有像这样的盒子结构的设计

它有点敏感，但是当我改变浏览器的宽度时，视频的高度会缩小，而＃left-box height保持不变。如何设置它以使高度保持与浏览器宽度减小相同。这就是现实世界中的样子。

http://richpoints.com/b-path

这是相关的CSS

#box {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:90%;
    height: 80%;
    background-color:rgba(192, 192, 192, 0.8);
}
#left-box {
    width:37%;
    height: 80%;
    position:absolute;
    left:.5%;
    top:7.25vh;
}
.video-container {
    top:7.25vh;
    position:absolute;
    min-width: 61%;
    min-height: 80%;
    width: auto;
    height: auto;
    background-size: cover;
    right:.75%;
}

body, html {
    height:100%;
    background-image:url(../images/asphalt_texture437.jpg);
    transition: background-image 0.2s ease-in-out;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
    color:#FFF;
    ooverflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
}

Answer 1

您是否尝试将左侧框设置为最小宽度和最小高度，然后将高度和宽度设置为自动，就像您在右侧框中所做的那样？ （如果未设置图像尺寸，则为max-width，max-height）