[JavaScript] 指定した最大幅を超える画像のみリサイズする
仕事で使用したので、ついでにライブラリ化した。
画像投稿コンテンツやブログなどで、アップロードされた画像を公開側ページに表示する場合、レイアウトが崩れないように html で最大幅のみ指定する事があるが、表示する画像が指定した幅より小さい時は、画像が指定された幅に拡大されてしまうので画質が下がってしまう（システムでトリミングすれば別だが）。
このライブラリを使用すると、画像本来のサイズが指定された最大幅より大きい場合のみリサイズされるため、
上記のような問題を解決することができる。（かなり使用状況は限られるが・・）
使い方
ZIPファイルを解凍後、JSファイルを任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。
<script type="text/javascript" src="imageSizeFix.js"></script>次に、最大サイズを指定したいimg要素に class="sizefix" を指定する。
<img src="sample.png" alt="sample" class="sizefix" />最後に、JSファイルを開き、各設定項目をサイトに合わせて編集する。
//-----------------------------------------
// 設定値
//-----------------------------------------
maxWidth : 300,// 最大幅の指定
dynamicSwitch : false,// 最大幅をhtmlに記述されたwidthから取得する（画像毎に最大幅を変えることが可能）
useClListener : false,// このscriptをDOMContentLoadedイベントで実行するか否か
targetClass : 'sizefix',以上でこのscriptが適用される。
トラックバックURL
http://mashimonator.weblike.jp/mt/mt-tb.cgi/100
コメント投稿フォーム