ブラウザの幅からはみ出た要素を切り捨てる

複数の要素をブロック状に並べていて、ブラウザの幅からはみ出した場合要素をはみ出して表示するのではなく、非表示にして常に綺麗に並べる方法です。

Browser size aware content scaling を利用します。

HTML

<div class="imgFit">
<a href="#"><img src="01.png" alt="" /></a>
<a href="#"><img src="02.jpg" alt="" /></a>
<a href="#"><img src="03.gif" alt="" /></a>
<a href="#"><img src="04.png" alt="" /></a>
<a href="#"><img src="05.jpg" alt="" /></a>
<a href="#"><img src="06.gif" alt="" /></a>
</div>

CSS

.imgFit a img {
    width: 200px;
    height:200px;
    border: 1px solid #666;
    padding: 0;
    margin: 10px;
}

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(window).bind("resize", calculateContent);
    calculateContent();
});

function calculateContent( e ) {
   $(".imgFit a").show();
   var imageWidth = 222;
   var contentAreaWidth = $(".imgFit").width();
   var itemsPerRow = Math.floor(contentAreaWidth / imageWidth);
   var totalNrOfItems = $(".imgFit a").length;
   var fullRows = Math.floor(totalNrOfItems / itemsPerRow);
   var itemsToHide = totalNrOfItems - fullRows * itemsPerRow;
   for(var i = totalNrOfItems; i > totalNrOfItems - itemsToHide; i--) {
      var remover = i - 1;
      $(".imgFit a:eq("+remover+")").hide();
   }
}
</script>