JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row" style="margin: 10px">
        <div class="span2">
            <div class="ratio" style="background-image:url('http://placehold.it/200x800')" />
            </div> 
        </div>            
        <div class="span2">
            <div class="ratio" style="background-image:url('http://placehold.it/800x200')">
            </div>
        </div>
    </div>
</div>

CSS

.ratio{
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 50% ; /* % of width, defines aspect ratio*/
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
}