JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<div class="container">
    <div class="image-group">
        <img src="http://placehold.it/300x600" alt="">
    </div>
</div>

CSS

.container {
    height: 600px;
    overflow: hidden;
    border: red 1px solid;
    float: left;
}
.image-group {
    display: block;
    position: relative;
}

JavaScript

// top = (containerHeight - imageHeight) / 2
// see: http://bit.ly/1kJ1iJl

var repositionImage = function () {
    var $img = $('.image-group');
    var $container = $('.container');
    var top = ($container.height() - $img.height()) / 2;

    $img.css('top', top + 'px');
}

var changeContainerHeight = function (height) {
    var $container = $('.container');
    $container.height(height);

    repositionImage();
}

setTimeout(function () {
    changeContainerHeight(100);
}, 1000);

setTimeout(function () {
    changeContainerHeight(400);
}, 2000);

setTimeout(function () {
    changeContainerHeight(200);
}, 3000);