JSFiddle - React, Tailwind, and code Playground

by m4r73n

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%;
  flex-basis: 100%;
}