Question

嘿伙计们，我正在尝试编写一个JavaScript函数，它将扩展图像以始终填充div（因此根据需要裁剪顶部或侧面）。这是CSS等效的CSS3代码background-size：cover。

我不能为我的生活弄清楚。这就是我到目前为止所做的：

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

}

Answer 2

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

这个想法是一样的，但这里的要点是计算放大的尺寸而不使用介质的初始尺寸，而是使用给定的宽高比。我将它用于视频嵌入，而不是图像，例如，我通过YouTube API加载视频，并且我没有任何初始大小，但我知道比率，我想在可用的范围内扩展视频空间。（当然，可以将其更改为根据视频或图像的实际尺寸计算比率。）还做了一些代码简化。

全出血图像调整大小计算

2 个答案: