サムネイルのサイズを動的に縮小して均等にスペースを占める

サムネイルのサイズを小さくして、ページ全体に均等に収まるようにしようとしていますが、特定の幅を超えないようにできるだけ大きくしています。サムネイルのサイズを動的に縮小して均等にスペースを占める

次のコードは私が達成した最も近いものですが、特定の幅では全体の幅を占めるわけではありません。

これは私の数学の理解が不十分なためだと思いますが、助けてもらえますか？（また、私は特に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

サムネイルのサイズを動的に縮小して均等にスペースを占める

答えて

関連する問題