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.
*/

Answer 2

我实际上建议你使用带盖的背景样式。否则你会有一个像seosussex这样低迷的网站。

e.g。

<style>
    body {
        background: url('image-here') no-repeat center center;
        background-size: cover;
        display: block;
        ...
    }
</style>

ex：an example

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

2 个答案: