JSFiddle - React, Tailwind, and code Playground

by foxdie

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
        
        <!-- item -->
        <div class="col-xs-6 col-sm-3">
            <div class="thumbnail">
                <div class="img-wrapper">
                    <img src="http://placehold.it/400x400" alt="400">
                </div>
                <div class="caption text-center">caption</div><!-- optional -->
            </div>
        </div>
            
        <!-- item -->
        <div class="col-xs-6 col-sm-3">
            <div class="thumbnail">
                <div class="img-wrapper">
                    <img src="http://placehold.it/800x800" alt="800">
                </div>
                <div class="caption text-center">caption</div><!-- optional -->
            </div>
        </div>
            
        <!-- item -->
        <div class="col-xs-6 col-sm-3">
            <div class="thumbnail">
                <div class="img-wrapper">
                    <img src="http://placehold.it/400x400" alt="400">
                </div>
                <div class="caption text-center">caption</div><!-- optional -->
            </div>
        </div>
            
        <!-- item -->
        <div class="col-xs-6 col-sm-3">
            <div class="thumbnail">
                <div class="img-wrapper">
                    <img src="http://placehold.it/800x800" alt="800">
                </div>
                <div class="caption text-center">caption</div><!-- optional -->
            </div>
        </div>
            
        <!-- item -->
        <div class="col-xs-6 col-sm-3">
            <div class="thumbnail">
                <div class="img-wrapper">
                    <img src="http://placehold.it/400x400" alt="400">
                </div>
                <div class="caption text-center">caption</div><!-- optional -->
            </div>
        </div>
            
        <!-- item -->
        <div...

CSS

.thumbnail img{
    max-width: 100%; /* do not stretch the bootstrap column */
}

.img-wrapper{
	width: 100%;
	padding-bottom: 150%; /* your aspect ratio here! */
	position: relative;
}

.img-wrapper img{
	position: absolute;
	top: 0; 
	bottom: 0; 
	left: 0; 
	right: 0;
	min-height: 100%; /* optional: if you want the smallest images to fill the .thumbnail */
}