css - 一个盒子里有 2 个元素的响应式设计

Question

我正在设计一个像这样的盒子结构

它有些响应，但是当我更改浏览器的宽度时，视频的高度会缩小，而#left-box 高度保持不变。我如何设置它以使高度在浏览器宽度减小时保持不变。这是它在现实世界中的样子。

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

您是否尝试过将左侧框设置为最小宽度和最小高度，然后将高度和宽度设置为自动，就像您对右侧框所做的那样？ (如果未设置图像尺寸，则为最大宽度、最大高度)