JSFiddle - React, Tailwind, and code Playground

by oboshto

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="row">
    <div class="col-sm-6">
        <h1>Meest bekeken</h1>
        <div id="row">
            <div class="col-sm-6"> 
                <a href="#" class="thumbnail">
                    <div class="caption">
                        title<br/>3 x bekeken
                     </div>
                    <div class="image">
                     <img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD" class="img img-responsive full-width" />
                    </div>
                 </a>
            </div>
            <div class="col-sm-6"> 
                <a href="#" class="thumbnail">
                    <div class="caption">
                        title<br/>
                        3 x bekeken
                     </div>
                    <div class="image">
                     <img src="http://images4.fanpop.com/image/photos/17600000/Awesome-random-17652989-500-278.jpg" class="img img-responsive full-width" />
                    </div>
                 </a>
            </div>
            <div class="col-sm-6"> 
                <a href="#" class="thumbnail">
                    <div class="caption">
                        title<br/>
                        3 x bekeken
                     </div>
                    <div class="image">
                     <img src="http://drupal.hanswang.info/sites/default/files/A%2520random%2520doodle...__600_450_q50.jpg" class="img img-responsive full-width" />
                    </div>
                 </a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
         <h1>Other div</h1>
    </div>
</div>

CSS

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}