JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="article-listing">
    <li>
        <div class="image-column"> <a href="#"><img src="http://www.thepledgetree.com/wp-content/uploads/2013/11/Tree-11.jpg"></a>
        </div>
    </li>
    <li>
        <div class="image-column"> <a href="#"><img src="http://www.mayowynnebaxter.co.uk/blog/wp-content/uploads/2012/07/Oak-tree.jpg"></a>
        </div>
    </li>
    <li>
        <div class="image-column"> <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/450px-Ash_Tree_-_geograph.org.uk_-_590710.jpg"></a>
        </div>
    </li>
</ul>

CSS

.article-listing li {
    width: 247px;
    height: 250px;
}
.image-column {
    background: #cecece;
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.image-column a img {
    position:relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}