JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
    <img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
    <img src="http://dummyimage.com/150x300/eeeeee.png">
</div>
<div class="box">
    <img src="http://dummyimage.com/50x50/eeeeee.png">
</div>

CSS

* {
    box-sizing: content-box;
    margin: 0px;
    padding: 0px;
}

.box {
    background-color: #CC0000;
    width: 100px;
    max-width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    margin-right: 25px;
    text-align: center;
    position: relative;
    line-height: 100px;
}

.box img {
    display: inline;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}