How to make centre cropped image responsive?

Question

Based on an existing answer, I have managed to centre crop an image. I am having trouble making the centre cropped image responsive, though.

Question

Answer 1

I have tried with a script. I simply created a function and called on loading and re-sizing.

jQuery

$(document).ready(function () {
    heightMan();

    $(window).resize(function () {
        heightMan();
    });
});

function heightMan() {
    var winHeight = $(window).height();
    var winHeight_50 = (winHeight / 2) - 20;

    var container_node = $('.center-cropped-img');
    var container_height = container_node.height();
    container_height = winHeight_50;

    container_node.css('height', container_height);
}

CSS Changes

.center-cropped-img {
    width: 64%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

See in action.