JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<img src="http://wizardchan.org/test/src/1shuu4q3.wizardchan.test.png" alt="Smiley face" height="42" width="42">
    <img src="http://media.economist.com/images/images-magazine/2010/12/11/tq/20101211_tqp001.jpg" alt="Smiley face" height="42" width="42">
        <img src="http://wizardchan.org/test/src/1shuu4q3.wizardchan.test.png" alt="Smiley face" height="42" width="42"><img src="http://wizardchan.org/test/src/1shuu4q3.wizardchan.test.png" alt="Smiley face" height="42" width="42">

JavaScript

$projectSlider.find('img').each(function(){

        if($(this)[0].naturalWidth > 0 || $(this)[0].complete) {

            var $img = $(this);

            var maxHeight = $projectSlider.height(),
                maxWidth = $projectSlider.width(),
                oldHeight = $img.height(),
                oldWidth = $img.width(),
                ratio = Math.max(oldWidth / oldHeight, oldHeight / oldWidth),
                newHeight = 0,
                newWidth = 0;

            // Complex calculations to get the perfect size

            if(oldWidth > oldHeight){

                if(maxWidth / ratio < maxHeight){
                    newHeight = maxHeight;
                    newWidth = maxHeight * ratio;
                } else {
                    newWidth = maxWidth;
                    newHeight = maxWidth / ratio;
                }

            } else {

                if(maxHeight / ratio < maxWidth){
                    newWidth = maxWidth;
                    newHeight = maxWidth * ratio;
                } else {
                    newHeight = maxHeight;
                    newWidth = maxHeight / ratio;
                }

            }