我正在努力实现像本网站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);
});
答案 0 :(得分:2)
他们正在使用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.
*/
答案 1 :(得分:1)
我实际上建议你使用带盖的背景样式。否则你会有一个像seosussex这样低迷的网站。
e.g。
<style>
body {
background: url('image-here') no-repeat center center;
background-size: cover;
display: block;
...
}
</style>
ex:an example