Javascript 全出血图像大小计算

Javascript 全出血图像大小计算,javascript,resize,crop,Javascript,Resize,Crop,我正在尝试编写一个JavaScript函数,该函数将扩展图像以始终填充div(因此根据需要裁剪顶部或侧面)。它是CSS3代码背景大小:cover的JavaScript等价物 我一辈子都想不出来。这就是我到目前为止所做的: function full_bleed(box_width, box_height, new_width, new_height) { var aspect_ratio=new_width/new_height;

我正在尝试编写一个JavaScript函数,该函数将扩展图像以始终填充div(因此根据需要裁剪顶部或侧面)。它是CSS3代码背景大小: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
        };
    
    }
功能完全放气(箱宽、箱高、新箱宽、新箱高)
{
可变宽高比=新宽/新高;

如果(新高度多亏了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
    };

}
完全放气:功能(箱宽、箱高、imgWidth、imgHeight)
{
//计算新的高度和宽度
var initW=imgWidth;
var initH=imgHeight;
var比率=初始值/初始值;
imgWidth=箱宽;
imgHeight=箱宽*比率;
if(仪表板高度<箱体高度){
imgHeight=箱高;
imgWidth=imgHeight/比值;
}
//返回新尺寸
返回{
宽度:imgWidth,
高度:imgHeight
};
}

我对Drew的解决方案做了一些更改,以更好地满足我的需要

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]);
函数计算覆盖(框架、侧面){
var比率=边[1]/边[0],
封面={
宽度:frame.width,
高度:Math.ceil(frame.width*ratio)
};

如果(cover.height)你应该查看bgStretcher的源代码(或者直接使用它),这就是它的基本功能(虽然绑定到整个窗口),我知道我不应该只是说“谢谢”,而是伙计!!,我一直在浏览不同的jquery插件,并做了一些“if width>height”维切维萨,两天来一直在努力实现视频背景的正确比例!!你的解决方案很简单,我用了20分钟就实现了,终于!哦,我真的很感激,想知道为什么没有更多的选票…真的谢谢你=)我喜欢这个主意。如果你提前知道这个比例就好了。