jQueryで画像横幅の最大サイズを制御する。

仕事でMovableTypeをベースで提供する場合、画像のサイズがコンテンツエリアの横幅よりも大きくて、全部見えないとか画像が突き抜けてるとかあったので、jQueryで画像のサイズを判定して、デフォルトより大きければ最大値で表示、デフォルト内であればそのまま表示ってのをやってみた。

jQueryを指定してから以下のコードをheadにぶち込めばOK！
（直接指定する場合は https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ）

<script type="text/javascript">
// 画像幅調整
$(function fixImageSize(){
	jQuery.event.add(window, "load", function(){
    // maxWidthに幅の上限値を設定します
    var maxWidth = 500;
    // 幅あふれを見つけたら、比率を維持したまま、幅をmaxWidthへ変更します
    $('.field img').each(function(){
        var w = $(this).width();
        if (w > maxWidth) {
            $(this).height($(this).height()*(maxWidth/w)).width(maxWidth);
        }
    });
	});
});
</script>

var maxWidth = 500 ;の所の数値（この場合は500）を画像最大値に変更すれば、
その数値を基準に処理しますよ。

これで、適当なサイズでアップされても大丈夫だーーー

どこかのサイトを参考にしたと思うんだけど、
そのサイトがどこか分かんなくなってしまったので、もしその方が見てたらスイマセン。