動態縮小縮略圖的大小以均勻佔據空間

我試圖降低縮略圖的大小以使它們均勻適合整個頁面，但仍然儘可能大而不超過特定寬度。動態縮小縮略圖的大小以均勻佔據空間

下面的代碼是我能夠實現的最接近的，問題是在某些寬度下，它不會完全佔據整個寬度。

我會認爲這是由於我對數學的理解不夠充分，有人可以幫忙嗎？（另外我對Javascript不是特別熟悉）。

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <style> 
      .thumb { 
       display: inline-block; 
       background-color: green; 
       margin: 4px; 
       width: 200px; 
       height: 200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="thumbnails"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div> 

     <script> 
      var resizeThumbnails = function() { 
       var w = $('#thumbnails').width(); 
       var thumbsPerRow = w/208; 
       var thumbDiffer = 208 - (thumbsPerRow % 1) * 208; 
       var thumbSize = 208 - (thumbDiffer/Math.floor(thumbsPerRow)); 
       var thumbSize = thumbSize - 8; 
       $("#thumbnails .thumb").width(thumbSize).height(thumbSize); 
      } 
      $(window).resize(resizeThumbnails); 
      $(window).ready(resizeThumbnails); 
      resizeThumbnails(); 
     </script> 
    </body> 
</html>

來源

2012-01-07 Noah McIlraith

var resizeThumbnails = function() { 
    var w = $('#thumbnails').width(); 
    var thumbsPerRow = Math.ceil(w/208); 
    var thumbSize = Math.floor(w/thumbsPerRow) -8; 
    $("#thumbnails .thumb").width(thumbSize).height(thumbSize); 
}

工作，你有多少縮略圖可以通過縮略圖寬度除以容器寬度適合在一行，並圓了（因爲我們爲了調整別人走過額外增加一個額外的縮略圖）。根據每行數量重新計算縮略圖大小。

來源

2012-01-07 09:13:10 andrewmabbott

動態縮小縮略圖的大小以均勻佔據空間

回答

相關問題