jquery: Bildformat beibehalten, während ein Hintergrundbild in der Größe geändert wird

Question

Ich habe eine bestehende Website, die ein Hintergrundbild auf der Homepage erfordert.

Der folgende Code funktioniert perfekt auf der Website, aber ich kann nicht herausfinden, wie das Bildseitenverhältnis beibehalten wird.

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

Ich glaube, ich irgendeine Art von if-Anweisung muß, wie wenn die Breite ist das gleiche wie die Fensterbreite und die Höhe ist zu klein, auf Übereinstimmung mit der Höhe und stellen Sie die Breite ... Ich kann einfach nicht funktionieren aus der richtigen Syntax!

Update: mit der hier beschriebenen Methode Whats the algorithm to calculate aspect ratio? I need an output like: 4:3, 16:9 kann ich auf das Seitenverhältnis des Bildes zugreifen. Allerdings habe ich jetzt mein Verhältnis, ich weiß nicht, was ich damit machen soll!

Aktualisiert Code: -

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 
    }); 
}; 

UPDATE 2:

Nach dem Einstecken für ein bisschen an diese weg mehr habe ich diesen Code:

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 
    }); 
    }; 

}; 

, die die Ration unterhält aber doesn nicht richtig richtig dehnen. Also eine Lösung, aber nur teilweise.

Answer 1

Es gibt ein paar JQuery-Plugins, die bereits tun, was Sie benötigen;

1. JQuery supersized - http://buildinternet.com/project/supersized/
   Supersized Diashows und mehr Hintergründe ermöglicht aber auch einen einzigen Hintergrund haben, kleinen Codeblock zum Download zur Verfügung.

2. JQuery Gegengerade - http://srobbin.com/jquery-plugins/backstretch/

Hoffnung, das hilft.

Answer 2

• Demo: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'); 
});