JSFiddle - React, Tailwind, and code Playground

HTML

<img class="crop" id="CropImage1" src="" />
<br/>

<img class="crop" id="CropImage2" src="" />
<br/>

<img class="crop" id="CropImage3" src="http:" />
<br/>

<script type='text/javascript' src='http://dl.dropbox.com/u/26764200/javascript/smartpreload.js'></script>

CSS

.crop { display: none; }
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }

JavaScript

$(document).ready(function()
{
    var cropImageSources = 
    [
        'https://cdn.free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg', 
        'http://img05.tooopen.com/images/20150925/tooopen_sy_143684733881.jpg', 
        'http://www.chinanews.com/cul/2018/01-08/U322P4T8D8418615F107DT20180108102000.jpg'
    ];

    $(document).smartpreload(
    { 
        images: cropImageSources, 
        oneachimageload: function(src) 
        {
            $.each(cropImageSources, function(index, value) 
            { 
                if(value == src) $('#CropImage' + (index+1)).attr('src', src);
            });
        }, 
        onloadall: function() 
        {
            CropImageToSquare(200);
        }
    });
    

});

function CropImageToSquare(squareSize)
{
    $('img.crop').each(function(i, item)
    {
        $(item).wrap('<div class="container" />');
    });

    $('div.container').each(function(i, item)
    {
        $(item).css({'height': squareSize + 'px', 'width': squareSize+ 'px' });
    });

    $('.container img').each(function(i, item)
    {
        executeToSquare(item, squareSize);
    });        
}

function executeToSquare(imageItem, squareSize)
{
    var width = $(imageItem).width();
    var height = $(imageItem).height();
    
    var tmp_width = 0;
    var tmp_height = 0;
    
    var position_top = 0;
    var position_left = 0;
    
    if(width == height)
    {
        tmp_width = squareSize;
        tmp_height = squareSize;
        
        position_top = parseInt(0 - ((tmp_height - squareSize )/2), 10);
        position_left = parseInt(0 - ((tmp_width - squareSize )/2), 10);
    }
    else if(width > height)
    {
        tmp_width = parseInt(((width / height) * squareSize ), 10);
        tmp_height = squareSize;
                    
        position_top = parseInt(((tmp_height - squareSize )/2), 10);
        position_left = parseInt(0- ((tmp_width - squareSize )/2), 10);
    }
    else if(height > width)
    {
       ...