Css 保持流体大小容器的纵横比

我一直在尝试构建一个表/网格状结构，该结构在保持元素纵横比的同时，在大小上应该是流动的

我提出了一些接近我想要构建的东西，只是缺少了“保持纵横比”部分。我知道我不应该同时设置宽度和高度，但是删除任何声明都会完全破坏布局

标记：

<div class="testWrap2">

    <h2 class="dMarginBottom">Resposive Solution?</h2>


    <div class="teaserGrid">
        <div class="gridRow">
            <div class="gridElement small cimage"><img src="http://placekitten.com/g/336/200"></img><div>2a</div></div>
            <div class="gridElement small cimage"><img src="http://placekitten.com/g/336/200"></img><div>2b</div></div>
            <div class="gridElement small cimage"><img src="http://placekitten.com/g/336/200"></img><div>2c</div></div>
        </div>      
        <div class="gridRow">
            <div class="gridElement small image"><img src="http://placekitten.com/g/336/234"></img></div>
            <div class="gridElement large cimage"><img src="http://placekitten.com/g/672/200"></img><div>2b</div></div>

        </div>                  
    </div>



</div>

更新说明

在调整大小时，我希望保留两个比率：

• （高度A）：（宽度A+宽度B）[绿线]和
• （高度B）：（高度C）[蓝线]

---

@说实话，我不明白为什么会这样。你能详细说明一下吗？这在数学上是可能的。对不起，我理解错了，我将删除我的评论。我做的这把新小提琴应该是你需要的。您必须对绿色div的内容使用绝对定位，以便它们保持其纵横比。可能重复的

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

.testWrap2{
    margin: 30px auto;
    max-width: 1010px;
    height:37.1%; /*this is so arbitrary and wrong  but it somehow works*/
}

.teaserGrid{
    height:100%;
    max-height:469px;
}


.gridRow{
    margin-left:-1px;
    height:100%;
    max-height:234px;
    clear:both;
}


.gridElement{
    float:left;
    padding-left:1px;
    padding-bottom:1px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box;      
    height:100%;
    max-height:234px;
    }

.gridElement div{
    background-color:green;
    width:100%;
    height:14.5%;
}

.gridElement img{
    width:100%;
}


.gridElement.image img{
    height:100%;
}

.gridElement.cimage img{
    display:block;
    height:85.5%
}


.gridElement.small{
    width:33.33%;
}

.gridElement.large{
    width:66.66%;
}

.full-width {
  width: 100vw;
  height: calc(100vw * (9/16));
}