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）[绿线]和
（Heigt B）:( Heigt C）[蓝线]

sketch http://oi62.tinypic.com/2elgzms.jpg

Answer 1

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

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

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

1 个答案: