Javascript 按固定相关长度的比例计算轴长度

基础知识

我正在开发一个小工具，它可以帮助打印相关产品进行几何计算

概述

我有两个输入（

w

和

h

），用户应该在其中输入框的宽度和高度。这个框应该是一个表示用户度量的基于CSS的小框

问题是，我不能仅仅将测量值作为像素，甚至是

像素*10

，或者任何东西，作为显示框的宽度/高度，因为我的空间有限

该框的最大测量值为

69 x 69

我想要实现的是，将输入的较长测量值应用于其相应的轴，然后计算与此成比例的另一个轴

我的方法

我一点也不懂数学。但我已经尽了最大的努力，我建立了一个功能来实现上述目标：

updateRectBox: function(w, h){

    // define maximum width and height for box
    var max_x=69;
    var max_y=69;
    var factor,x,y;

    factor=w/h;

    if(w==h){

        // if we have a 1:1 ratio, we want the box to fill `69px` on both axis
        x=max_x;
        y=max_y;

    } else {

        if(w>h){

            // if width is larger than height, we calculate the box height using the factor
            x=max_x;
            y=(factor>1 ? max_y/factor : max_y*factor);

        } else {

            // if height is larger than width, we calculate the box width using the factor
            x=(factor>1 ? max_x/factor : max_x*factor);
            y=max_y;

        }

    }

    // using this to set the box element's properties
    jQuery('#rect').css({
        'width': (x)+'px',
        'height': (y)+'px'
    });

}

此功能运行良好，但：

问题

我知道这可以用更少的代码做得更漂亮。但由于我缺乏数学技能，我想不出比我写的东西更简洁的了

---

使您能够更轻松地测试您的优化。

您的函数完全完成了它所需要的功能。然而，有一些方法可以说写起来更优雅

其基本思想是，您有一个尺寸为（

w

×

h

）的盒子，并且您想要一个缩放版本的盒子，以适合（69×69）盒子

要装入（69×69）个箱子，您的（

w

×

h

）箱子的宽度必须小于69，高度必须小于69。假设您按数量

s

进行缩放。然后您的新框具有维度（

s*w

×

s*h

）。使用上述约束条件，我们知道：

---

s*w这正是我想要的。解释得也很好。非常感谢。
updateRectBox: function(width, height) {

    // define maximum width and height for box
    var max_width = 69;
    var max_height = 69;
    var scale = Math.min( max_width / width, max_height / height );

    var x = scale * width;
    var y = scale * height;

    // using this to set the box element's properties
    jQuery('#rect').css({
        'width': x+'px',
        'height': y+'px'
    });
}