はじめに。

個別にサムネイル画像を準備できれば問題ないのですが、システム案件や顧客側で更新作業をする場合など、
それが難しい場合にjQueryで画像をリサイズ、センタリングしサムネイルを表示する覚え書きです。

表示イメージ

縦長、横長、パノラマの画像を使っていますが、こんなかんじでトリミングしていきます。

（画像はこちらからお借りしました。http://www.ashinari.com/ ）

サムネイル画像を配置

HTML


<div class="trimming"><img src="image1.jpg"></div>
<div class="trimming"><img src="image2.jpg"></div>
<div class="trimming"><img src="image3.jpg"></div>
<div class="cle"></div>

css


div.trimming {
  width:250px;
  height:250px;
  overflow:hidden;
  float: left;
  margin: 10px;
  border: solid 1px #666;
  }

.trimming img { position:relative;}

.cle { clear: both;} /*float解除用*/

この段階では画像は原寸。
div.trimmingからはみ出た部分がoverflow:hidden；で切り抜かれているだけの状態です。

jQueryでリサイズ+センタリング

まずはjQueryの読み込み。
<script type="text/javascript" src="jquery.min.js"></script>

次にこのコードを書きます。


jQuery.event.add(window, "load", function(){
        var sl = '.trimming img'; //リサイズしたい画像のクラス名
        var fw = 250;        // サムネイルの幅
        var fh = 250;        // サムネイルの高さ
        var iw, ih;
        $(sl).each(function(){
            var w = $(this).width(); // 画像の幅(原寸)
            var h = $(this).height(); // 画像の高さ(原寸)

            //横長の画像の場合
            if (w >= h) {
                iw = (fh/h*w-fw)/2
                $(this).height(fh); //高さをサムネイルに合わせる
                $(this).css("top",0);
                $(this).css("left","-"+iw+"px");//画像のセンター合わせ
            } 

            //縦長の画像の場合
            else {
                ih = (fw/w*h-fh)/2
                $(this).width(fw); //幅をサムネイルに合わせる
                $(this).css("top","-"+ih+"px");//画像のセンター合わせ
                $(this).css("left",0);
            }
        });
    });

画像が横長の場合…高さをサムネイルにあわせて、x方向にセンター合わせ
画像が縦長の場合…幅をサムネイルにあわせて、y方向にセンター合わせ　をやってる感じです。

やったー！できたよーー！！
これだと、画像のサイズがバラバラでもアス比が一定でなくてもひとまずそれっぽいサムネイルが表示できます。

さいごに

新しいブラウザのみを対象とするならobject-fit:coverで一発ですし
（でも未だにsnowleopardしか支給されてない人だっているんです私みたいに。）
おなじjQuery使うにしても「imgLiquid」とかの方が断然便利なんですけどね。

こういう実装にしたのはマウスオーバーで動き付けたい時に「imgLiquid」だと上手くいかなかったからなのですが
その点はまた次回書きたいと思います。

jQueryでサムネイル画像をセンタリング+トリミング。