BLOG

ブログ

画像に元サイズのmax-widthを追加するjQueryプラグイン「jquery-addMaxWidth.js」

デザイン

Share this 11 Bookmark this 3

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

ダウンロード

jquery-addMaxWidth.js

MIT Lisenceで配布しますので、自己責任で自由にお使いください。

使い方

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

どうでもいい開発秘話

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

前田 大地

Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

関連記事