JSFiddle - React, Tailwind, and code Playground

HTML

<div class="touchslider">
        <div class="touchslider-viewport">
            <div class="touchslider-item">           
                <img src="http://goroduspeha.com/wp-content/uploads/2013/01/%D1%80%D1%8B%D0%B6%D0%B8%D0%B9-%D0%BA%D0%BE%D1%82-%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB_ruzhuj-kot-simvol.jpg"/>          
        </div>
</div>

JavaScript

$('.touchslider-item img').each(
function(){
       //var img = $('.touchslider-item img'),
                var viewport = $(this).parents('.touchslider-viewport'),
                        item = $(this).parents('.touchslider-item'),
                        img = $(this),
                //  imgWidth = $(this).width(),
                //   imgHeight = $(this).height(),
                        coef = Math.min(viewport.height() / $(this).height(), viewport.width() / $(this).width());
                console.log(viewport.height());
                //$(this).on('load', function(){
                $(window).resize(function(){
                    $(img).css({
                        width:$('item').width()*coef + 'px' ,
                        height:$('item').height()*coef + 'px'
                    });
                });
               // });
                item.css({
                    width:100 + '%'
                });
                $(this).css({
                width:$(this).width()*coef + 'px' ,
                 height:$(this).height()*coef + 'px'
                  });
                viewport.css({
                   height:  viewport.width() *0.8 + 'px',//$(this).height()  + 'px',
                   position: "relative"
                });
            }
    );