css - 保持流体尺寸容器的纵横比

Question

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

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

标记:

<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>

CSS

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%;
}

更新说明

我想在调整大小时保持两个比例:

• (高度 A):(宽度 A+宽度 B)[绿线] 和
• (高度 B):(高度 C)[蓝线]

Answer 1

https://css-tricks.com/fun-viewport-units/

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