jQuery :: 画像を指定サイズにリサイズして表示する

jQuery で、画像を指定サイズにリサイズして表示します。
サムネイルの表示に便利です。

• ※ 横幅と高さの比率は保ったままリサイズします。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
    jQuery.event.add(window, "load", function(){
        var fw = 100;        //fixed width
        var fh = 100;        //fixed height
        var sl = 'img.hoge'; //selector
        $(sl).each(function(){
            var w = $(this).width();
            var h = $(this).height();
            if (w >= h) {
                $(this).width(fw);
            } else {
                $(this).height(fh);
            }
        });
    });
</script>
 
<img src="sample1.jpg" class="hoge">
<img src="sample2.jpg" class="hoge">
<img src="sample3.jpg" class="hoge">

• 上記例では、「横幅：100px」「高さ：100px」に設定しています。
  1. 横長の画像は、横幅100px にリサイズします(高さも横幅に準じてリサイズされます)
     • 例）横幅200px,高さ140pxの画像 ⇒ 横幅100px,高さ70px
  2. 縦長の画像は、高さ100px にリサイズします(横幅も高さに準じてリサイズされます)
     • 例）横幅100px,高さ200pxの画像 ⇒ 横幅50px,高さ100px