Scale four columns inside div # wrapper proportionally (maintaining an aspect ratio) responsive to view

In this project I have one big div inside my body (and also inside the main one, just for css reasons) that contains eight smaller divs (in four columns, side by side). Dividers are located side by side across display:inline-block;

. The large div is 100% wide, the smaller divs have different widths and should automatically fill those 100% of the parent div. Two of the four columns are made up of a single div with a height of 100%; and two columns contain two divs one below the other, each div has a height: 50%.

I'm really stuck on how I get these four divs to individually width (so that they keep the images inside visible).

The page should never scroll and all content should always be visible.

I found something like this behavior for images, but I can't seem to get this to work with my div # wrapper. ( Responsive image in full screen and center - maintain aspect ratio, don't go over window )

Here's a link to the jsfiddle: http://jsfiddle.net/hLzoxmyb/7/

Here's my HTML:

<main>
    <div id="wrapper">
        <div id="one">
            <figure id="one">
                <img src="01.png" alt="01">
            </figure>
        </div>
           <div id="two">
            <figure id="02">
                <img src="02.png" alt="02">
            </figure>
            <figure id="03">
              <a href="03.html"><img src="03.png" alt="03"></a>
            </figure>
        </div>
           <div id="three">
            <figure id="04">
              <a href="04.html"><img src="04.png" alt="04"></a>
            </figure>
            <figure id="05">
              <a href="05.html"><img src="05.png" alt="05"></a>
            </figure>
        </div>
           <div id="four">
            <figure id="06">
              <a href="06.html"><img src="06.png" alt="06"></a>
            </figure>
        </div>
    </div>
</main>

      

        
        
        
      

    

And here is the CSS code:

body {
    background-color:#cccccc;
    font-family: monospace;
    font-size:120%;
    margin:0;
    padding:0;
}

div#one figure, div#four figure {
    height:80%;
    height:80vh;
}

div#two figure, div#three figure {
    height:40%;
    height:40vh;
}

figure {
    margin:0;
    padding:0;
}

div#wrapper {
    margin:0 auto;
    padding-bottom:10%;
    padding-bottom:10vh;
    padding-top:10%;
    padding-top:10vh;
    white-space:nowrap;
    width:80%;
}

div#wrapper div {
    display:inline-block;
    width:25%;
}

div#wrapper div figure img, div#wrapper div figure a img {
    height:100%;
    width:100%;
}