Jquery 全屏幕图像元素

我想有一个全屏图像对象，它将始终适合视口大小。图像包装的高度应为视口的高度。我已使用以下代码完成此操作：

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

hero.height(win.height());

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

img, a img { 
    max-width: 100%;
    vertical-align: middle; 
}

<>我想包装器里面的图像元素总是在中间。当我们缩小视口大小时，图像元素的左侧和右侧应该被隐藏。我得出了以下要点“FullScreener”。我试着为我重新创建它，但它不起作用

该插件只有在我选择父项时才有效，对我来说，id为“hero”。当我将选择器更改为

#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});

---

如果更改了

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

到

加

body
{
    padding:0;
    margin:0;
    overflow:hidden;
}

清除空白

• 溢出：隐藏是不必要的，它只是用来摆脱滚动条

下面是使用您的代码的示例：

编辑：

在您的网站的

style.css

页面中，您有以下代码：

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

hero.height(win.height());

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

img, a img { 
    max-width: 100%;
    vertical-align: middle; 
}

移除它似乎解决了这个问题

---

我在这里重新创建了您的网站，我对右侧样式的

img，一个img

代码进行了注释，尝试取消注释，看看它如何使您的背景伸展。

工作！非常感谢你！