こんにちは、ころすけ(@wg_koro)です。
Webページに画像を載せる際、特定のサイズまで縮小して表示したい時ってありますよね。例えば幅200px、高さ300pxの画像を、幅150pxにして表示させたい…とか。
こんな時、
[html]
<img src=’hoge.jpg’ width=’150′>
[/html]
<img src=’hoge.jpg’ width=’150′>
[/html]
と書けば、表示上は幅150pxになります。高さは「幅150px」に合ったサイズへ自動で縮小されます。
では、この時、幅150px, 高さ150pxのコンテナに収まるような画像にするには？
安直に
[html]
<img src=’hoge.jpg’ width=’150′ height=’150′>
[/html]
<img src=’hoge.jpg’ width=’150′ height=’150′>
[/html]
としてしまうと、変な縮尺になり画像が崩れてしまいます。こんな時は自分で幅と高さを計算するしかありません。
・・・正直面倒くさいですね。こんな時に使えるスクリプト作りました。
指定幅、高さを指定すると、その範囲内で縮尺をキープしたサイズを適用してくれるスクリプトです。
ご自由にお使い下さい(・ω・)ノ