全出血图像调整大小计算

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

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

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

}

Answer 2

我对德鲁的解决方案做了一些更改，以更好地满足我的需求。

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]);

想法是相同的，但这里的要点是在没有媒体初始尺寸的情况下计算放大的尺寸，而不是使用给定的宽高比。我将它用于视频嵌入，而不是图像，例如，我通过 YouTube API 加载视频，并且我没有任何初始大小，但我知道比率，并且我想在可用空间上拉伸视频。 （当然，也可以改回来，根据视频或图片的实际尺寸来计算比例。）
还做了一些代码简化。