JSFiddle - React, Tailwind, and code Playground

by ddehghan

HTML

<div class='container'>
    <img class="test1" src='http://fakeimg.pl/100x250/' />
</div>
<br>
<div class='container'>
    <img class="test2" src='http://fakeimg.pl/100x250/' />
</div>
<br>
<div class='container'>
    <img class="test1" src='http://fakeimg.pl/250x50/' />
</div>
<br>
<div class='container'>
    <img class="test2" src='http://fakeimg.pl/250x50/' />
</div>
<br>
<div class='container'>
    <img class="test1" src='http://fakeimg.pl/400x500/' />
</div>
<br>
<div class='container'>
    <img class="test2" src='http://fakeimg.pl/400x500/' />
</div>
<br>
<div class='container'>
    <img class="test1" src='http://fakeimg.pl/25x50/' />
</div>
<br>
<div class='container'>
    <img class="test2" src='http://fakeimg.pl/25x50/' />
</div>
<br>
<div class='container'>
    <img class="test1" src='http://fakeimg.pl/500x100/' />
</div>
<br>
<div class='container'>
    <img class="test1" src='http://fakeimg.pl/500x100/' />
</div>

CSS

.container {
    width: 300px;
    height: 200px;
    border: 1px solid green;
}
.test1 {
    max-width: 100%;
    max-height: 100%;
}
.test2 {
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

JavaScript

$(".test2").one("load", function () {
    var $img = $(this);

    var pw = this.parentNode.clientWidth;
    var ph = this.parentNode.clientHeight;

    var w = this.width;
    var h = this.height
    
    debugger;

    if (w > h) {
        $img.css({
            'width': '100%',
                'height': 'auto',
                'margin-top': calc(50% - Math.abs((ph - h) / 2)
        });

    } else {
        $img.css({
            'width': 'auto',
                'height': '100%',
                'margin-left': Math.abs((pw - w) / 2)
        });
    }
}).each(function () {
    if (this.complete) $(this).load();
});