Program

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

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

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

こんな時、

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

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

安直に

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

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

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

resize.js (Gists)

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

関連記事