如何適應大量的圖像轉換成窗口區域沒有溢出

所有： [更新]我發現一個愚蠢的，但幾乎工作方式：如何適應大量的圖像轉換成窗口區域沒有溢出

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

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

如果我有很多圖片網址（大約100），並且我把它們分別放到了一個，所有圖片的大小相同（您不必擔心比例問題但你需要保持這個比例，實際的大小是100乘100）。

我想要做的是儘可能使圖像儘可能填滿窗口，但沒有溢出，劑量任何人都可以給我一些簡單的算法來計算單個圖像的大小？

謝謝

來源

2015-05-15 Kuan

嗯，看看[有道理廊（http://miromannino.github.io/Justified-Gallery/）插件。我認爲這應該符合你的需求。 –

您有這個問題的更多信息？到目前爲止你有什麼？（HTML，CSS，任何JavaScript或類似的東西？）你想要圖像填寫一個單行，或加起來一個矩形的圖像？ –

@RamisWachtler謝謝，我會研究。順便說一句，你有沒有基於Bootstrap或Foundation的任何鏈接？ – Kuan

這是我在純數學答案的嘗試。

假設所有圖像的比例爲1：1，並且它們的比例不應大於100px，但仍會填充所有可用空間。

JSFiddle

來源

2015-05-15 19:02:19

謝謝，但很抱歉，我沒有完全理解你的想法。笏我想要做的是確保所有的圖像可以調整到一定的大小，以填補一個區域「儘可能地餬口」。在你的代碼中，它似乎根據寬度來計算調整比例的比例，但是如何處理高度部分，它還需要填充區域「儘可能多」（您不需要將圖像大小限制爲100乘100，只要他們填滿該區域的最大空間，任何大小都可以）？ – Kuan

如何適應大量的圖像轉換成窗口區域沒有溢出

回答

相關問題