JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<div class='reel'>
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_1.jpg' />
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_2.jpg' />
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_3.jpg' />
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_4.jpg' />
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_5.jpg' />
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_6.jpg' />
<img src='http://www.fashionphotographer.it/images/photo/fashion/f_7.jpg' />
</div>

CSS

* { background: #000; border: 0; margin: 0; padding: 0; }
div { width: 100%; height: 100%; position: fixed; left: 0; top: 0;}

JavaScript

var resize = function () {
    $('.reel').each(function () {
        console.log('resize');
        $(this).children().each(function () {
            var e = $(this),
                ratio = e.outerWidth() / e.outerHeight(),
                cwidth = $(window).width(),
                cheight = $(window).height(),
                cratio = cwidth / cheight,
                width, height, paddingw, paddingh;
    
            if (cratio > ratio) {
                height = cheight;
                width = height * ratio;
            } else {
                width = cwidth;
                height = width / ratio;
            }
    
            e.width(width);
            e.height(height);
            paddingh = (cheight - height) / 2;
            paddingw = (cwidth - width) / 2;
            e.css('padding-top', paddingh);
            e.css('padding-bottom', paddingh);
            e.css('padding-left', paddingw);
            e.css('padding-right', paddingw);
        });
    });
};

$(window).resize(resize);

resize();