JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id='box1'>
    <div id='box2'>
    </div>
</div>
<p id="w"></p>
<p id="iw"></p>

CSS

#box1 {
    width:100px;
    height:100px;
    overflow:auto;
}

#box2 {
    width:200px;
    height:200px;
    background-color:#aaa;
}

JavaScript

// using a random appended to the URL to simulate non-cached
// varying images
var r = Math.floor((Math.random()*100000)+1);

$('#box1').html("<img id='imgload' src='http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?"+r+"' />");

$('#imgload').load(function() {
var helperDiv = $('<div />');
$('#box1').append(helperDiv);

$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();
});