外部から読み込んだ画像の縦横比を維持して縮小する方法

isao — Fri, 28 Aug 2009 14:45:59 +0000

JavaScriptやActionScript3でも外部から読み込んだ画像の縦横比を維持して拡大・縮小をしたもの。今までこれにずっとつまずいていた。今、作っているものもちょっと、この縦横比を維持して縮小をしたかった。いろいろ調べてみたら、考え方が書いてあったので紹介したい。

縦横比を求めるには、縦の長さ / 横の長さで比率が求められる。
これを横をたとえば200pxにしたいとすると・・・縦の長さを横の長さに対して求めればいいと思う。

横の長さを基準にして縦の長さを求めると
横の長さx上で求めた縦横比 = 横を200pxにしたときの縦の長さ

例）ActionScriptで記述すると

 // 変数 hpw に 「高さ/横幅」 の比を取得
 var hpw:Number = photoFrame._height/photoFrame._width;
 // もし横幅が120より大きい場合
 if (photoFrame._width>120) {
 // 横幅を120にする
 photoFrame._width = 120;
 // そして高さもその比に合わせて変える
 photoFrame._height = 120*hpw;
 }
 // 上の縮小をしても(しなくても)まだ高さが160より大きい場合
 if (photoFrame._height>160) {
 // 高さを160にする
 photoFrame._height = 160;
 // そして横幅もその比に合わせて変える
 photoFrame._width = 160/hpw;
 }

変形しないように画像を表示するときに役に立つと思う。
これだけクラスファイルにするのも手だと思う。
関連した記事

Branberyheag!! Lab » 縦横比

外部から読み込んだ画像の縦横比を維持して縮小する方法