Edit in JSFiddle

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>

* {
    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;
}