Edit in JSFiddle

$("#gap").change(function(){
    var wrapperViewportWidth = Math.round($("#wrapper").width() / $(window).width() * 100);
    var wrapperViewportHeight = Math.round($("#wrapper").height() / $(window).width() * 100);
    var margin = parseFloat(this.value);

    $("#wrapper div").css("margin", margin);
    $(".big").css({
        "width": "calc("+ wrapperViewportWidth +"vw / 2 - "+ margin * 2 +"px)",
        "height": "calc("+ wrapperViewportHeight +"vw - "+ margin * 2 +"px)",
    });

    $(".small").css({
        "width": "calc("+ wrapperViewportWidth +"vw / 6 - "+ margin * 2 +"px)",
        "height": "calc("+ wrapperViewportHeight +"vw / 3 - "+ margin * 2 +"px)",
    });

    $(".middle").css({
        "width": "calc("+ wrapperViewportWidth +"vw / 3 - "+ margin * 2 +"px)",
        "height": "calc("+ wrapperViewportHeight +"vw / 1.5 - "+ margin * 2 +"px)",
    });
});

function randomNumber(min, max)
{
    return Math.floor(Math.random() * max + min);
}

function getRandomPicture(min, max)
{
    var width = randomNumber(min, max);
    var height = (randomNumber(1,2) == 1) ? Math.floor(width / 16 * 9) : Math.floor(width / 15 * 10);
    return "http://lorempixel.com/"+ width +"/"+ height +"/";
}

window.setTimeout(function(){
    $("#wrapper div").each(function(){
        $(this).css("background-image", "url("+ getRandomPicture(300, 500) +")");
    });
}, 1000);

<div id="wrapper">
    <div class="big"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="middle"></div>
    <div class="small"></div> 
</div>

Border: 0 <input type="range" min="0" max="5" step="0.5" id="gap"> 5

* {
    margin: 0;
    padding: 0;        
}

#wrapper {
    width: 100vw;
    height: 30vw;
    background: #ffb1e8;
}

#wrapper div {
    box-sizing: border-box;
    background-repeat: none;
    background-size: cover;
}

.big {
    width: calc(100vw / 2);
    height: calc(30vw);
    float: left;
}

.small {
    width: calc(100vw / 6);
    height: calc(30vw / 3);
    float: left;
}

.middle {
    width: calc(100vw / 3);
    height: calc(30vw / 1.5);
    float: right;
}