如何調整圖片尺寸以動態使用盡可能多的屏幕？

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。 因此，您需要在網格中以1280/720 / (width/height)的比例生成1張圖片來校正比例（我們將此數字稱為R）。 現在，您需要一個乘數來將要顯示的圖片數轉換為所擁有的圖片數。 您需要找到一個（M * floor（M * R）> N）的M，因為N很小，簡單的迭代就可以了。

因此，現在您將在網格中以M * R圖片顯示M圖片。

您現在所要做的就是按比例縮小所有圖片。 為了確保我們留出盡可能少的空格，我們將S設為min (width / (1280 * M), height / (720 * floor(M *R))) 。

因此，按S縮放所有圖片，並在具有M列和floor（M * R）線的網格中顯示它們。

所有這些都假定1280和720包括您可能希望在圖片之間保留的空白。 否則，您需要修改計算。