Edit in JSFiddle

.wrapperA {
    width: 200px;
    height: 400px;
    overflow: hidden;
    border: solid 1px #9f0000;
    margin: 0 0 20px 0;
    background-size: cover;
    background-position: center center
}
.wrapperB {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: solid 1px #9f0000;
    margin: 0 0 20px 0;
    background-size: cover;
    background-position: center center
}

<div class="wrapperA" style="background-image: url('http://krasimirtsonev.com/blog/articles/CSSChallenge1/pic1.jpg');"></div>
<div class="wrapperA" style="background-image: url('http://krasimirtsonev.com/blog/articles/CSSChallenge1/pic2.jpg');"></div>
<div class="wrapperA" style="background-image: url('http://krasimirtsonev.com/blog/articles/CSSChallenge1/pic3.jpg');"></div>

<div class="wrapperB" style="background-image: url('http://krasimirtsonev.com/blog/articles/CSSChallenge1/pic1.jpg');"></div>
<div class="wrapperB" style="background-image: url('http://krasimirtsonev.com/blog/articles/CSSChallenge1/pic2.jpg');"></div>
<div class="wrapperB" style="background-image: url('http://krasimirtsonev.com/blog/articles/CSSChallenge1/pic3.jpg');"></div>