JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

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; */
    margin: 20px auto;
    list-style: none;
}
.image-column {
    background: #cecece;
    width: 100%;
    height: 500px;
    overflow: hidden;
    
}
.image-column a img {
    position:relative;
    left: 50%;
    top: 50%;
    max-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}