レスポンシブなサイトなどで、画像の横幅を100%に指定している場合、画面サイズによっては画像がオリジナルサイズよりも大きく表示されることがあります。jquery-addMaxWidth.jsは、max-widthを自動で追加することで、任意の画像がオリジナルサイズを超えて表示されることを防ぎます。

ダウンロード

配布終了しました。

使い方

$(function(){
    $("img.amw").addMaxWidth();
});

imgタグに対して、自身のオリジナルサイズの横幅をcssのmax-widthとして付与します。「img.amw」のところにお好きなimgタグを指定してご利用ください。

どうでもいい開発秘話

このjQueryプラグインを書くキッカケは、私が作ったデザインを別の方にコーディングしていただいたことに始まります。見出しなどの文字画像は、それぞれ文字数が異なりますから、当然横幅も異なります。今回は、レスポンシブサイトでしたので、画面幅によっては文字数の多い文字画像は、収まりきらなくなります。私は普段、全ての文字画像を同じ横幅でスライスしておき、max-width:100%;を一括で指定します。こうすることで、画面幅が縮んでも全ての文字画像の文字サイズが揃った状態で縮小できます。しかし、画像をどうスライスしてどうコーディングするかは、コーダーさんによって千差万別です。今回お願いしたコーダーさんの手法は、文字部分で正確にトリミングした文字画像に、それぞれcssで横幅を%指定して文字サイズを揃えるというものでした。当然ですが、この手法に表示上の問題は全くありません。画像のスライスに手間をかけるか、CSSの記述に手間をかけるかの差だけです。むしろ、パーセントの数字を計算する手間がかかっているので、丁寧なコーディングをする人なんだなぁと思っていました。しかし、人生に困難はつきもの。急遽、レスポンシブのブレイクポイントが（私の勝手な都合で）変更になり、この手法では画面幅が広くなった時に文字画像が拡大されすぎてしまうことが判明しました。画像のスライスをやり直すかどうか迷った挙句、急遽このjsを書くことになったというワケです。まさしく、コーディングの醍醐味が生んだ、ごく限られた状況でしか使えないjQueryプラグインです。