JSFiddle - React, Tailwind, and code Playground

by Hamza Nisar

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<div class="row">
  <div class="col-xs-4">
    <div class="img-wrapper">
      <img class="img-responsive" src="https://www.googledrive.com/host/0B_o3I6x00l9PUFRRLWUtM0wzUG8" alt="">
    </div>
  </div>
  <div class="col-xs-4">
    <div class="img-wrapper">
      <img class="img-responsive" src="https://www.googledrive.com/host/0B_o3I6x00l9PMjJqSnd6UVU4OXc" alt="">
    </div>
  </div>
  <div class="col-xs-4">
    <div class="img-wrapper">
      <img class="img-responsive" src="https://www.googledrive.com/host/0B_o3I6x00l9PZjFIUy03UW9fOGM" alt="">
    </div>
  </div>
</div>

CSS

body{
      padding: 30px;
    }
    .img-wrapper{
      display:-webkit-flex;
      display:flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
      height: 350px;
      background-color: #eee;
    }
    .img-wrapper img{
        max-width:100%;
        max-height:100%;
        width:auto;
        height:auto;}