JSFiddle - React, Tailwind, and code Playground

by Rykus0

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-6">
        <div class="main-image">
            <img src="http://lorempixel.com/1024/500/" />
        </div>
    </div>
    <div class="col-md-6" id="dim">
        Some content here ...
    </div>
</div>

CSS

.main-image {
    width: 100%;
    height: 200px;
}

.main-image img {
    max-width: 100%;
    max-height: 100%;
}
.row {
    width: 1024px;
}

JavaScript

var MAX_W = 1024;
var MAX_H = 768;

$('img').on('click', function(){
    var w = Math.ceil(Math.random() * MAX_W);
    var h = Math.ceil(Math.random() * MAX_H);
    
    this.src = 'http://lorempixel.com/' + w + '/' + h + '/';
}).on('load', function(){
    document.getElementById('dim').innerHTML = this.width + '&times;' + this.height;
});