縦横比を維持した縮小サイズ計算

画像を表示枠に収まる最大サイズに縮小した場合のサイズはいくらか？
実装するなら最近はいろんなライブラリがあるのでそれを使う。
HTMLはCSSで簡単。
ということは、どんな方法が有るかを考えなくても良いのだろうか？

車輪の再発明

縦横比を維持して枠内に収める寸法を求める処理、javascriptならこうなる。

縦横比維持で縮小サイズの算出

function getScaleSize(width, height, maxWidth, maxHeight) {
    if (width <= maxWidth && height <= maxHeight) {
        return {"width":width, "height":height, "scale":1}
    }

    const scaleWidth = maxWidth / width;
    const scaleHeight = maxHeight / height;
    if (scaleWidth <= scaleHeight) {
        return {
            "width":parseInt(width * scaleWidth),
            "height":parseInt(height * scaleWidth),
            "scale":scaleWidth
        }
    } else {
        return {
            "width":parseInt(width * scaleHeight),
            "height":parseInt(height * scaleHeight),
            "scale":scaleHeight
        }
    }
}

解説

横も楯も枠内に収まる場合はそのままのサイズを返す。
画像引き伸ばしってうれしくないので（個人の感想です）。

横と縦それぞれを枠内に収めた場合の比率を算出し、小さいほうの値で縦横を縮小する。
横が0.4倍で収まる、縦が0.3倍で収まる場合、0.4倍では縦がはみ出る。

蛇足

厳密には縦横比を維持できていない。
端数切捨てているので。

仮に四捨五入にしたところで1pxの誤差がでる。
印刷して、拡大縮小コピーでサイズを合わせて透かして見たら違いが見えるかも？

浮動小数の演算誤差？細かいことは良いのです。
世の中に完璧なモノなんてありません。