JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
    <div class="flex-item">
        <div class="item-image">
            <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg">
        </div>
    </div>
    <div class="flex-item">
        <div class="item-image">
            <img src="https://c1.staticflickr.com/9/8264/8700922582_d7b50280b4_z.jpg">
        </div>
    </div>
    <div class="flex-item">
        <div class="item-image">
            <img src="http://www.pinaldave.com/bimg/ilovesamples.jpg">
        </div>
    </div>
    <div class="flex-item">
        <div class="item-image">
            <img src="http://appslova.com/wp-content/uploads/2014/11/Android-.png">
        </div>
    </div>
</div>

CSS

.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.flex-item {
    height: 222px;
    width: 200px;
    border: 1px solid lightgray;
    padding: 5px;
    margin: 5px;
}

.flex-item img {
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 100%;
    align-self: center;
    -webkit-align-self: center;
    margin: auto;
    object-fit: scale-down;
}

.item-image {
    border: 1px solid lightgray;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 190px;
    height: 120px;
}