JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.5/jquery.lazyloadxt.js"></script>
<br/><br/><br/><br/>
scroll down
<br/><br/><br/>
scroll down 
<br/><br/><br/>
<br/><br/><br/><br/>
scroll down
<br/><br/><br/>
scroll down 
<br/><br/><br/>
<br/><br/><br/><br/>
scroll down
<br/><br/><br/>
scroll down 
<br/><br/><br/>
<div id="crop">
<img data-src="http://1.bp.blogspot.com/-R7XPICyjSZA/VRaUCQteV1I/AAAAAAAABLc/PSsERo55dIg/s1600/artworks-000103151765-uxzfpd-t500x500.jpg"/>
</div>
<br/>
Image become collapsed and size is still 500 X 500 px

JavaScript

var w = 200;
var h = 150;
$('#crop').find('img').each(function(n, image){
  var image = $(image);
  image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
  image.attr('width',w);
  image.attr('height',h);
 });