javascript - 如何根据窗口大小动态调整图像大小？

Question

我正在尝试实现此网站上显示的效果 http://seosussex.co.uk/ .调整浏览器窗口大小时，顶部图像也会随之调整大小。我怎样才能做到这一点，以便在访问者首次访问该网站时完全看到顶部图像？

我的代码会导致图像完全调整大小并且不会完全填满窗口。

     //Set initial size
     var height =  $(window).height();
     var cHeight = height + "px";
     $('#topImage').css("height",cHeight);

     //Set size on window.resize
     $(window).resize(function(){

        var height =  $(window).height();
        var cHeight = height + "px";
        $('#topImage').css("height",cHeight);

     });

Answer 1

他们将 MaxImage 用于全尺寸 bg 图像。

http://seosussex.co.uk/js/jquery.maximage.js

这里是代码中的一些注释...

/*
--------------------------------------------------------------------
MaxImage 2.0 (Fullscreen Slideshow for use with jQuery Cycle Plugin)
--------------------------------------------------------------------
This plugin is intended to simplify the creation of fullscreen 
background slideshows.  It is intended to be used alongside the 
jQuery Cycle plugin: 
http://jquery.malsup.com/cycle/

If you simply need a fullscreen background image, please
refer to the following document for ways to do this that
are much more simple:
http://css-tricks.com/perfect-full-page-background-image/

If you have any questions please contact Aaron Vanderzwan
at http://www.aaronvanderzwan.com/blog/
Documentation at:
http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/

HISTORY:
MaxImage 2.0 is a project first built as jQuery MaxImage Plugin 
(http://www.aaronvanderzwan.com/maximage/). Once CSS3 came along, 
the background-size:cover solved the problem MaxImage
was intended to solve.  However, fully customizable
fullscreen slideshows is still fairly complex and I have not
found any helpers for integrating with the jQuery Cycle Plugin.
MaxCycle is intended to solve this problem.
*/