我正在尝试实现此网站上显示的效果 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);
});
最佳答案
他们将 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.
*/
关于javascript - 如何根据窗口大小动态调整图像大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24900772/