JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row" style="margin: 10px">
        <div class="span2">
            <div class="outer"><div class="between"><div class="inner">
                <img src="http://placehold.it/1600x400" />
            </div></div></div>
        </div>
        <div class="span2">
            <div class="crop">
                <img src="http://placehold.it/400x1600" />
            </div>
        </div>
    </div>
</div>

CSS

/* 1. Crop landscape image (cut left and right) */
.outer{
    display: inline-block;
    position: relative;
    width: 100%;
    overflow:hidden;
}
.between{
    /* height as the multiplicity of outer's width */
    padding-top: 100%;
}
.inner{
    position: absolute;
    top: 0;
    bottom: 0;
    /* how much to crop */
    left: -150%;
    right: -150%;
}

/* 2. Crop portrait image (cut top and bottom) */
.crop{
    float:left;
    overflow:hidden;
    width: 100%;
}
.crop img{
    margin: /* cut top: */ -150% -0px /* cut bottom: */ -150% -0px;
}