Full Bleed Image Resize Calculation

Question

I am trying to write a JavaScript function that will expand an image to fill a div always (so crop top or sides as needed). It is the JavaScript equivalent of the CSS3 code background-size: cover.

I can't for the life of me figure it out. This is what I have so far:

    function full_bleed(box_width, box_height, new_width, new_height) 
    {
        var aspect_ratio=new_width/new_height;
                
        if(new_height<box_height) {
                        
            new_height=box_height;
            new_width=Math.round(new_height*aspect_ratio);            
            
        }
        
        if(new_width<box_width) {

            new_width=box_width;
            new_height=Math.round(new_width/aspect_ratio);
        }
        
        return {
            width: new_width, 
            height: new_height
        };
    
    }

I figured one of you guys might have the equation lying around.

You should check out the source of bgStretcher (or just use it), this is essentially what it does (though tied to the entire window) http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html — Ben, Mar 23 '11 at 01:44

score 4 · Accepted Answer · answered Mar 23 '11 at 21:25

4

Thanks to the comment from Ben, I figured it out.

full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) 
{
    // Calculate new height and width
    var initW = imgWidth;
    var initH = imgHeight;
    var ratio = initH / initW;

    imgWidth = boxWidth;
    imgHeight = boxWidth * ratio;

    if(imgHeight < boxHeight){
        imgHeight = boxHeight;
        imgWidth = imgHeight / ratio;
    }

    //  Return new size
    return {
        width: imgWidth,
        height: imgHeight
    };

}

answered Mar 23 '11 at 21:25

Drew Baker

14,154
15
58
97

1

I know I shouldn't be just saying "thanks" but man!!, I've been looking through different jquery plugins and and doing some "if width > Height" and viceversa, and been trying to achieve the correct ration for a video background for 2 days!! and your solution is so simple, I implemented in 2minutes and voila, finally! soooo, I really appreciate this, wonder why this doesn't have more votes...REALLY thank you =) – Edward Mar 07 '14 at 17:57

score 0 · Answer 2 · answered May 29 '14 at 14:58

I made some changes on Drew's solution to better fit my needs.

function calculateCover(frame, sides) {
    var ratio = sides[1] / sides[0],
        cover = { 
            width: frame.width,
            height: Math.ceil(frame.width * ratio) 
        };

    if (cover.height <= frame.height) {
        cover.height = frame.height;
        cover.width = Math.ceil(frame.height / ratio);
    }

    return cover;
}

calculateCover({width: 1280, height: 822}, [16,9]);

The idea is the same, but the point here is to calculate the scaled up size without having an initial size of the media, instead using a given aspect ratio. I use it for video embeds, rather than images, where I load the video via YouTube API, for example, and I don't have any initial size, but I know the ratio and I want to stretch the video across the available space. (Of course, it can be changed back to calculate the ratio from the actual dimensions of the video or image.) Also made some code simplifications.

I like this idea. Good if you know the ratio ahead of time. – Drew Baker May 29 '14 at 20:15 — Drew Baker, May 29 '14 at 20:15

Full Bleed Image Resize Calculation

2 Answers2

Linked