javascript - 全出血图像调整大小计算

Question

我正在尝试编写一个 JavaScript 函数，它将始终扩展图像以填充 div(因此根据需要裁剪顶部或侧面)。它是 CSS3 代码 background-size: cover 的 JavaScript 等价物。

我这辈子都弄不明白。这是我目前所拥有的:

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

我想你们中的某个人可能知道方程式。

Answer 1

感谢 Ben 的评论，我明白了。

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

}