JSFiddle - React, Tailwind, and code Playground

by EZSlaver

HTML

<div class="example" id="e1">
    <div class="table">
        <div class="table__cell">
            <img src="http://placehold.it/750x350" alt="" />
        </div>
    </div>
</div>
<div class="example" id="e2">
    <img src="http://placehold.it/750x350" alt="" />
</div>

CSS

#e2 {

    display: none;

}

#e1 {

    display: block;

}

html, body {

    height: 100%;

}

.table {

    display: table;

    width: 100%;

    height: 100%;

}

.table__cell {

    display: table-cell;

    vertical-align: middle;

}

img {

    display: block;

    max-width: 100%;

    max-height: 100%;

    margin: 0 auto;

    relative;

}

.example {

    height: 100%

}

.fixed {

    position: fixed;

    top: 10px;

    left: 10px;

    z-index;

    1000;

}

div.fixed {

    top: 13px;

    left:125px;

}

JavaScript

$(window).resize(function () {
    // Case 1
    $("#e1 img").css("max-height", $("#e1").height());

    // Case 2
    $("#e2 img").css("top", ($("#e2").height() - $("#e2 img").height()) / 2);
});