html - 如何在不溢出的情况下将大量图像放入窗口区域

Question

全部: [更新] 我找到了一个愚蠢但几乎可行的方法:

function (total, W, H){
                    var fillVertical;
                    var fillHorizontal;
                    for(var n=1; n<total; n++){
                        var m = Math.floor( W/(H/n) );
                        if( (n*m>=total) && (n*m<(total+m) ) ){
                            fillVertical = {
                                row: n,
                                col: m,
                                size: +(Math.floor(100*H/n)/100).toFixed(2),
                                remainspace: H*(W-(H/n)*m)
                            }
                            break;
                        }
                    }
                    for(var m=1; m<total; m++){
                        var n = Math.floor( H/(W/m) );
                        if( (n*m>=total) && (n*m<(total+m) ) ){
                            fillHorizontal = {
                                row: n,
                                col: m,
                                size: +(Math.floor(100*W/m)/100).toFixed(2),
                                remainspace: W*(H-(W/m)*n)
                            }
                            break;
                        }
                    }
                    if(!fillVertical){
                        return fillHorizontal;
                    }
                    if(!fillHorizontal){
                        return fillVertical;
                    }
                    return (fillVertical.remainspace<fillHorizontal.remainspace? fillVertical:fillHorizontal);
                }

============================================= =========================

如果我有很多图片 url(大约 100 个)，并且我将它们每个都放在一个 , 所有图片都是相同的大小(你不需要担心比例问题，但你需要保持这个比例，实际大小是 100 x 100)。

我想做的是让图像尽可能填满窗口但不溢出，谁能给我一些简单的算法来计算单个图像的大小？

谢谢

Answer 1

这是我对纯数学答案的尝试。

假设所有图像都是 1:1 的比例，并且它们的缩放比例不应大于 100px，但仍会填满可用空间。

JSFiddle