スポンサードリンク

指定サイズ以内の画像幅、高さを算出して適用するjavascript

こんにちは、ころすけ(@wg_koro)です。

Webページに画像を載せる際、特定のサイズまで縮小して表示したい時ってありますよね。例えば幅200px、高さ300pxの画像を、幅150pxにして表示させたい…とか。

こんな時、

<img src='hoge.jpg' width='150'>

1	<img src='hoge.jpg' width='150'>

と書けば、表示上は幅150pxになります。高さは「幅150px」に合ったサイズへ自動で縮小されます。

では、この時、幅150px, 高さ150pxのコンテナに収まるような画像にするには？

安直に

<img src='hoge.jpg' width='150' height='150'>

1	<img src='hoge.jpg' width='150' height='150'>

としてしまうと、変な縮尺になり画像が崩れてしまいます。こんな時は自分で幅と高さを計算するしかありません。

・・・正直面倒くさいですね。こんな時に使えるスクリプト作りました。

指定幅、高さを指定すると、その範囲内で縮尺をキープしたサイズを適用してくれるスクリプトです。

ご自由にお使い下さい(・ω・)ノ

2013-05-07 ｜ Posted in Program ｜ No Comments »　

Comment