TECH BOX

Technology blog from Web Engineer

この記事は最終更新日から5年以上経過しているため正確ではないかもしれません

アスペクト比の求め方

画像を特定の要素にフィットさせるでは画像のアスペクト比を保ったまま拡大縮小ささせるロジックでしたが、画像のアスペクト比を計算する方法もあります。

例えば最近のムービーは16:9が主流だったり、黄金比が1:1.618だったりというのは聞いたことあると思います。
アスペクト比というのは矩形の長辺(横):短辺(縦)の比率のことを言います(業界によっては逆の場合もある)

ウェブサイトを作成する上では計算する必要はほとんどないですが、計算方法を知っておくと時々便利なこともあります。
(アスペクト比自体はレスポンシブを実現させるために有効活用することもありますがそれは次回の記事で)

計算方法

アスペクト比を求めるには横と縦の最大公約数を求め、縦横をその最大公約数で除算した数値が比率になります。
最大公約数は2つ以上の整数に共通する約数(割り切れる数値)の中で一番大きい数値を言います。

例えば1920*1080の最大公約数は120です。
横:1920 / 120 = 16
縦:1080 / 120 = 9
= 16:9となります。

手動で計算していってもいいですが結構面倒なのでプログラムでアスペクト比を求めることができます。

See the Pen Aspect Ratio by Nobuyuki Kondo (@artprojectteam) on CodePen.0

最大公約数の求め方

最大値を求める為のアルゴリズムはユークリッドの互除法を使って求めることができます。
ユークリッドの互除法とはr = a % bで剰余を求め、q = b % rs = r % qと計算していき最初に剰余が0になった時の除数が最大公約数になるというアルゴリズム。
詳しい事はwikiを参照。

function gcd(x, y){
  if(y === 0) return x
  return gcd(y, x % y)
}

最初に横と縦を関数に渡すだけで、剰余が0になるまで勝手に計算してくれます。