画像サイズを大きさによって自動リサイズ表示js

CMSとか組んでいると、
記事に登録している画像の大きさによって、
表示時にリサイズしたり、
サムネイル生成して表示したり、
色々システム側の処理って必要ですよね。

150pxの画像も1200pxの画像も、
実寸表示させちゃったらサイトのレイアウト壊れるし、
一律500px表示しちゃったら、150pxの画像は変に拡大されてぼやけて迷惑です。

サーバにimagemagickがあれば、
システム側で処理するのが、通常だと思います。
でも、HTML側で出来る処理ってあります。

そもそも、IEは7以上、Firefoxとか新しいブラウザが対象なら、
スタイルシートで
max-widthとかmax-heightとか指定したらいいんですけど。

まだまだ、max-widthとかmax-heightが使えないIE6が幅を利かせているので、
むやみに使ったところで悲しくなるだけ。クレームと修正作業のもとです。

そこで、

・300px以上の画像は、300pxに縮小表示 ・300px未満の画像は、実寸(250pxとか100pxとか)のまま表示

という優れものjavascriptを使ってみましょう。
(もちろんカスタムして、幅は自由に設定してください。)

これで、最新のスタイルシートの技を盾にぼやく必要がなくなります。

▼サンプル
画像サイズを大きさによって自動リサイズ表示js

センスのないネーミングでスミマセン。。。

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/358
Listed below are links to weblogs that reference
画像サイズを大きさによって自動リサイズ表示js from px*blog