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

上記、利用させていただきました。
ありがとうございました。

表示幅、表示高さを <img> の属性から渡すように変更してみました。
「$(window).bind("load", function() { ... 」は Chrome や Safari で img の width(), height() を取得するために必要のようです。

$(document).ready(
function() {
/*
* <img class="fit_size" max_width="###" max_height="###"> の画像を
* 縦横比率を変えずに、属性 max_width x 属性 max_height に収まるように
* サイズ変更して表示する
*/
$(window).bind("load", function() {
$('img.fit_size').each(function() {
var max_width = parseInt($(this).attr('max_width' ));
var max_height = parseInt($(this).attr('max_height'));
var img_width = $(this).width() ;
var img_height = $(this).height();

if (max_width / max_height >= img_width / img_height) {
$(this).height(max_height);
} else {
$(this).width(max_width);
}
});
});
}
)

root-n, 2012/11/28 16:26

> くまがいさん
コメントありがとうございます。
なるほど、これなら１つの記述でさまざまな高さや幅の画像に対応できますね。
参考にさせていただきます。ありがとうございます。

スーパーコピー後払い, 2020/11/13 02:13

programming/javascript/jquery/reseize_image.txt

文書の先頭へ

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

リサイズ処理のデモ

コメント (ご自由にお書きください)