全出血图像调整大小计算 [英] Full Bleed Image Resize Calculation

问题描述

Hey Guys，
我正在尝试编写一个JavaScript函数，它将扩展图像以总是填充div（因此根据需要裁剪顶部或侧面）。这是CSS等效的CSS3代码背景大小：封面。

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.

谢谢！

推荐答案

感谢Ben的评论，我想通了。

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

}

这篇关于全出血图像调整大小计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！