JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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>

CSS

* {
    box-sizing: border-box;
}

.box {
    display: flex;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    justify-content: center;
    align-items: center;
    float: left;
    margin-right: 50px;
}

.box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}