Question

我正在开发一个用于监控事件的Web UI，这些事件会在UI上弹出作为图片，这些图片会在一定时间后消失。用户界面将在壁挂式监视器上全屏打开。现在，给定一些图片N，如何重新调整图片大小以最佳地使用屏幕？原始图片尺寸为1280 * 720，放大或缩小时应保持相同的比例，所有图片尺寸应相同。目标屏幕高度和宽度是变量。数字图片N将小于100.有人可以建议一个有效，易于实现的算法吗？

感谢Sorin，这是我得到的代码，它对问题非常有效：

function resize(){
    var ratio=1280/720;
    var w=document.getElementById("container").clientWidth;
    var h=document.getElementById("container").clientHeight;
    var n=$("video").length;
    var R=ratio/(w/h);
    var width,height;
    var column=1;

    if(n>0){
        while(column*Math.ceil(column*R)<n){
            column++;
        }
        var row=Math.ceil(column*R);
        height=Math.min(h/row,w/column/ratio)-12;//12 pixel margin
        width=height*ratio;
        $("video").height(height).width(width)
    }
}

Answer 1

首先弄清楚如何改变比率。图片的比例为1280/720，而显示器的宽度/高度。因此，您的网格中需要1张1280/720 / (width/height)张照片才能更正比例（让我们将此号码称为R）。现在您需要一个乘数来获得您显示的图片数量，即您拥有的图片数量。你需要找到一个M（M * floor（M * R）> N），因为N很小，只需要一个简单的迭代。

所以现在你要用网格中的M * R图片显示M张图片。

现在您只需缩小所有照片。为了确保我们留下尽可能少的空格，我们将S视为min (width / (1280 * M), height / (720 * floor(M *R)))。

因此，用S对所有图片进行缩放，并将其显示在具有M列和地板（M * R）线的网格中。

这一切都假定1280和720包含您可能想要在图片之间留下的任何空白。否则你需要修改计算。

如何调整图片大小以动态使用尽可能多的屏幕？

1 个答案: