画像が納まりきらない場合の対処/アスペクト比についての考え方　プログラミング学習

パソコン画面のアスペクト比が、画面に映したい画像のアスペクト比より大きい場合、画像の方が縦に長いことになります。

両者の物差しとなるアスペクト比は、
アスペクト比＝横／高さで表されるからです。

元々パソコン画面と同じサイズの画像であったとします。

ここからパソコン画面のアスペクト比の方を大きくするには、画像の高さを大きくする必要があります。

こうすると、画像の高さの方が画面より高く、画面に入りきらない状態になります。

この場合に画像を表示させたいのであれば、画像を表示させるための幅、高さは次のように設定します。

①高さは、パソコン画面から必要な余白分を差し引いたサイズ。

②幅は、①で設定した高さにアスペクト比を乗じたサイズ。
のように設定します。

if(windowAspectRatio > imageAspectRatio){
  dispHeight = windowHeight -padding;
  dispWidth = dispHeight * imageAspectRatio;
};

アスペクト比の大小関係が逆の場合も、配置する画像の縦、横どちらが大きいかを基準に考えるといいと思います。

①表示するディスプレイの横が決まれば、

②アスペクト比＝横／高さから、

ディスプレイ高さ＝横／アスペクト比で求めることができます。