JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<img class="crop" data-crop="0.8" width="600" height="400" src="https://dummyimage.com/600x400/000/fff" />
<img class="crop" data-crop="0.7" width="600" height="400" src="https://dummyimage.com/600x400/000/fff" />
<img class="crop" data-crop="0.6" width="600" height="400" src="https://dummyimage.com/600x400/000/fff" />

CSS

.crop-container {
  display: inline-block;
  overflow: hidden;
}

JavaScript

$(document).ready( function() {
    $('img.crop').each( function() {
        var _this = $(this);
        var width = _this.width();
        var height = _this.height();
        var crop = _this.data('crop');
        _this.wrap( $('<div />').addClass('crop-container').width(width*crop).height(height*crop) ); 
    });
});