Fullscreenr на элемент изображения

Я хотел бы иметь полноэкранный объект изображения, который всегда будет соответствовать размеру видового экрана. Высота обертки изображения должна быть высотой области просмотра. Я сделал это со следующим кодом:

var hero = $( '#hero' );
var win = $( window );

hero.height(win.height());

$( window ).resize(function () {
    hero.height(win.height());
});

Я хочу, чтобы элемент изображения внутри обертки всегда находился посередине. Когда мы уменьшаем размер области просмотра, левая и правая стороны элемента изображения должны быть скрыты. Я пришел к следующему gist "fullscreenr". Я попытался воссоздать его для меня, но это не сработает.

Плагин работает, только если я выбираю родителя, для меня id "герой". Когда я меняю селектор на #hero img он не работает правильно. Изображение будет растягиваться, чтобы изображение было сдвинуто вместе и не исчезло с обеих сторон.

Это код:

/**
* Fullscreenr - lightweight full screen background jquery plugin
* By Jan Schneiders
* www.nanotux.com
* 
* Modifications by Chris Van Patten
* http://www.vanpattenmedia.com
* Version 1.5
**/

(function($){

    $.fn.fullscreenr = function(options) {
        var defaults = { width: 1280,  height: 1024, elementID: this.selector };
        var options = $.extend({}, defaults, options); 

        $(document).ready(function() { $(options.elementID).fullscreenrResizer(options);    });
        $(window).bind("resize", function() { $(options.elementID).fullscreenrResizer(options); }); 

        return this;        
    }

    $.fn.fullscreenrResizer = function(options) {
        // Set bg size
        var ratio = options.height / options.width;

        // Get browser window size
        var browserwidth = $(window).width();
        var browserheight = $(window).height();

        // Scale the image
        if ((browserheight / browserwidth) > ratio){
            $(this).height(browserheight);
            $(this).width(browserheight / ratio);
        } else {
            $(this).width(browserwidth);
            $(this).height(browserwidth * ratio);
        }

        // Center the image
        $(this).css('left', (browserwidth - $(this).width()) / 2);
        $(this).css('top', (browserheight - $(this).height()) / 2);

        return this;
    }

})( jQuery );

$('#hero img').fullscreenr({width: 1400, height: 800});

Надеюсь, вы, ребята, можете мне помочь. Спасибо.