1

I have been trying to build a table/grid like structure that should be fluid in terms of size while maintaining the aspect ratio of the elements.

I came up with something close to what I want to construct, only missing the "keep-aspect-ratio" part. I know I should not both set width and height, but removing any of the declarations completely ruins the layout.

Markup:

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

UPDATE for explanation

There are two ratios I'd like to keep while resizing:

  • (Height A) : (Width A+WidthB) [green lines] and
  • (Heigt B) : (Heigt C) [blue lines]

sketch

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Anna Melzer
  • 1,403
  • 3
  • 13
  • 23
  • 1
    @web-tiki I don't understand why that is so, to be honest. Could you please elaborate? It is possible mathematically. – Anna Melzer May 16 '14 at 15:11
  • Sorry, I missunderstood, I'll delete my comment. I made this new fiddle that shoul be what you need. You will have to use absolute positionning for the content of the green divs so they keep their aspect ratio. http://jsfiddle.net/webtiki/9XJJQ/7/ – web-tiki May 16 '14 at 15:27
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Rob Sep 29 '17 at 11:34

1 Answers1

0

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

.full-width {
  width: 100vw;
  height: calc(100vw * (9/16));
}
zloctb
  • 10,592
  • 8
  • 70
  • 89