JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id="container">
    <div id="box1"></div>
<div id="overflow">

</div>
</div>
<span class="btn">change size</span>

CSS

#overflow {
    overflow:auto;
    width:500px;
    height:200px;
    -webkit-transform:translateZ(0);
    border:1px solid #000;
}
#container { 
    width:500px;
}

#box1 {
    height:100px;
    background-color:#aaa;
    border:1px solid #333;
}

.btn {
    text-decoration:underline;
    cursor:pointer;
    color:blue;
}

.btn:hover {
    color:red;
}

JavaScript

var scrollbarWidth = 15;
var r = Math.floor((Math.random()*100000)+1);
var pagelink = 'http://lorempixel.com/output/city-q-c-1920-1920-4.jpg?'+r;

$('#overflow').html(
    "<img style='display:none;' width='535' id='imgload' src='"+pagelink+"' />"
);
        
$('#overflow').css('height',200);
$('#overflow').show();

getImgSize(pagelink,
  function(sz) {
    var aowidth = $('#overflow').width();
    var aoheight = $('#overflow').height();
    var tmpimgwidth = 0;
    var tmpimgheight = 0;
    var imgwidth = aowidth;
    if(sz.width > aowidth) {
      tmpimgwidth = aowidth;
      var fac = sz.width / aowidth;
      tmpimgheight = sz.height / fac;
      if(tmpimgheight > aoheight) {
        imgwidth = aowidth - scrollbarWidth;
      }
    }

    $('#imgload').attr('width',imgwidth);
    $('#imgload').show();
  }
);

  function getImgSize(imgSrc,callback) {
    var newImg = new Image();

    newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    //alert ('The image size is '+width+'*'+height);
    function s() {}
    sz = new s();
    sz.width = width;
    sz.height = height;
    console.log("infunc w = "+sz.width+", h = "+sz.height);
    callback(sz);
  }

  newImg.src = imgSrc;


  }

$('.btn').click(function() {
    var tmp1 = $('#box1').height();
    var tmp2 = $('#overflow').height();
    var spd = 300;
    $('#box1').animate({height:tmp2},spd);
    $('#overflow').animate({height:tmp1},spd);
});