Full Bleed Image Resize Calculation

问题

Hey Guys, I'm trying to write a JavaScript function that will expand an image to fill a div always (so crop top or sides as needed). It's 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.

Thanks!

回答1:

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

}

回答2:

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.

来源：https://stackoverflow.com/questions/5399568/full-bleed-image-resize-calculation

标签

javascript

resize

crop