jquery: maintain aspect ratio whilst resizing a background image

Question

I have an existing site that requires a background image on the home page.

The following code works perfectly on the site, but I am unable to work out how to maintain the images aspect ratio.

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

I think I need some sort of if statement such as if the width is the same as the window width and the height is too small match the height and adjust the width... I just can't work out the correct syntax!

Update: using the method described here Whats the algorithm to calculate aspect ratio? I need an output like: 4:3, 16:9 I can access the Aspect Ratio of the image. However, Now I have my ratio I don't know what to do with it!

Updated 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:

After plugging away at this for a bit longer I have this 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
     });
    };

};

Which maintains the aspect ration but doesn't quite stretch properly. So a fix but only partially.

NOTE: I have to set the height attribute to match "document" as "window" is too small. — Username_null, Mar 27 '12 at 11:12

score 0 · Accepted Answer · answered Mar 27 '12 at 11:28

0

There are a few JQuery plugins which already do what you require;

JQuery supersized - http://buildinternet.com/project/supersized/
Supersized allows slideshows and multiple backgrounds but also has a single background, smaller code block available for download.
JQuery Backstretch - http://srobbin.com/jquery-plugins/backstretch/

Hope this helps.

answered Mar 27 '12 at 11:28

Sagar Patil

1,938
13
21

Thanks, I have tried both of those plug ins, but they're not working for me. I think the issue is that the site's layout is kind of set in stone so the solution has to be made to fit. – Username_null Mar 27 '12 at 11:42
Do you have a link to the site or a test link that I can view? – Sagar Patil Mar 27 '12 at 11:44
Sorry I don't, it's currently only available in-house – Username_null Mar 27 '12 at 11:47

Luca Filosofi · Answer 2 · 2012-03-27T19:31:51.013

0

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

edited Mar 27 '12 at 19:31

answered Mar 27 '12 at 14:38

Luca Filosofi

30,905
9
70
77

That will call the function but I can't see how that will maintain the aspect-ratio since I am altering the height and width within the function. – Username_null Mar 27 '12 at 14:48

jquery: maintain aspect ratio whilst resizing a background image

2 Answers2