JSFiddle - React, Tailwind, and code Playground

by Harsh Kansagara

HTML

<div class="imagecon">
    <img src="http://lorempixel.com/100/200/" class="ar-it fill"/>
</div>

CSS

.imagecon{
    border:1px solid black;
    width:100px;
    height:100px;
    padding:10px;
}
.ar-it{
    display:none;
}

JavaScript

$(function(){
    var ar;
    ar={
        frameW:'',
        frameH:'',
        frameR:'',
        photoW:'',
        photoH:'',
        photoR:'',
        toMove:'',
        
        init:function(){
            ar.f_wrap();
        },
        
        f_wrap:function(){
            $('.ar-it').each(function(){
                
                //WRAPPING PHOTO IN FRAME
                $(this).wrap('<div class="ar-frame" style="width:100%; height:100%; overflow:hidden; position:relative">');
                
                //FINDING FRAME ASPECT RATIO
                ar.frameW=$(this).parent().outerWidth();
                ar.frameH=$(this).parent().outerHeight();
                ar.frameR=ar.frameW/ar.frameH;
                
                //FINDING PHOTO ASPECT RATIO
                ar.photoW=$(this).outerWidth();
                ar.photoH=$(this).outerHeight();
                ar.photoR=ar.photoW/ar.photoH;
                
                //APPLYING CSS CLASS 
                ar.frameR>ar.photoR?$(this).addClass('wide'):$(this).addClass('tall');
                
            });
            ar.f_applyCss();
            ar.f_centering();
            $('.ar-it').fadeIn(500);
        },
        
        f_applyCss:function(){
            
            //IMAGE
            $('.ar-it').css({
                'position':'absolute',
                'top':'0',
                'bottom':'0',
                'left':'0',
                'right':'0',
            });
            
            //FRAME
            $('.ar-it.fill.wide, .ar-it.full.tall').css({
                'width':'100%'  
            });
            
            $('.ar-it.fill.tall, .ar-it.full.wide').css({
                'height':'100%'  
            });
            
        },
        
        f_centering:function(){                   
            $('.ar-it').each(function(){
                
                //FINDING FRAME ASPECT RATIO
                ar.frameW=$(this).parent().outerWidth();
          ...