Question

我有一个现有网站，需要在主页上提供背景图片。

以下代码在网站上运行良好，但我无法确定如何保持图像宽高比。

function resize(itemToResize){
var newHeight = $(document).height() -120,
    newWidth = $(window).width();
$(itemToResize).css({
    "width" : newWidth,
    "height" : newHeight
    });
};

我想我需要某种if语句，例如宽度是否与窗口宽度相同而且高度是否太小与高度相匹配并调整宽度...我只是无法找出正确的语法！

更新：使用此处描述的方法Whats the algorithm to calculate aspect ratio? I need an output like: 4:3, 16:9我可以访问图像的宽高比。但是，现在我有我的比例，我不知道该怎么做！

更新的代码： -

function gcd (a, b) {
    return (b == 0) ? a : gcd (b, a%b);
    }

function resize(itemToResize){
var newHeight = $(document).height() -120,
    newWidth = $(window).width();

var w = $(itemToResize).width(),
    h = $(itemToResize).height(),
    r = gcd (w, h);

$(itemToResize).css({
    "width" : newWidth,
    "height" : newHeight
    });
};

更新2：

在插入这一段时间之后，我有了这段代码：

function resize(itemToResize){  
var AspectRatio = $(itemToResize).width()/$(itemToResize).height();
var WindowHeight = $(document).height() -205;
var WindowWidth = $(window).width();
var AspectRatio = WindowWidth/WindowHeight;
if (AspectRatio >= AspectRatio) {
     $(itemToResize).css({
        "width" : WindowWidth,
        "height" : WindowWidth/AspectRatio
        }); 
     $('body').css({
        "height" : WindowWidth/AspectRatio
     });
} else {
    $(itemToResize).css({
        "width" : WindowHeight*AspectRatio,
        "height" : WindowHeight
        });
    $('body').css({
        "height" : WindowHeight
     });
    };

};

保持纵横比但不能很好地伸展。所以修复但只是部分修复。

Answer 1

有一些JQuery插件已经满足您的需求;

JQuery超大 - http://buildinternet.com/project/supersized/
Supersized允许幻灯片和多个背景，但也有一个背景，较小的代码块可供下载。
JQuery Backstretch - http://srobbin.com/jquery-plugins/backstretch/

希望这有帮助。

Answer 2

演示： http://jsbin.com/oxetuy

$(window).load(function() {
 var $win = $(this);
 var $img = $('#background').css({'position':'fixed','top':0,'left':0});
    function resize() {
        if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
          $img.css({'height':'100%','width':'auto'});
        } else {
          $img.css({'width':'100%','height':'auto'});
        }
    }
    $win.resize(function() { resize(); }).trigger('resize');
});

jquery：在调整背景图像大小的同时保持纵横比

2 个答案: