使用javascript缩放时保持比例的框

我已经做了一个脚本：它将给定的维度缩放到外部div中。在我输入一个维度（如200 x 99）之前，一切看起来都很好。然后盒子在外面生长

---

我真的找不到原因，有人能帮忙吗？

这是个很小的错误。在比较之前，您忘记将

宽度

和

高度

转换为整数。因此，您需要将

if（width>=height）

更改为

if（parseInt（width）>=parseInt（height））

问题在于您没有限制沿两个轴的比例。您的箱子的高宽比为5:3。如果不沿两个轴进行限制，则可能会在盒外出血。一个例子可以最好地说明这一点

以高度为两个维度中的较大者为例。您的代码仅沿500px轴限制它。因此，如果我们把一个5:>3比例的盒子扔进去，你会得到一个爬行的边缘

例如，将“3”和“5”放在方框中。非常合身。现在让它变成3.1和5。卢武铉

您需要在每个部分中添加另一个if语句，然后确定维度比率是否超出此边界。在上述情况下，您需要使5:3.1的高度不是500px，而是使3.1等于300px的高度（小于500px）。那将是483px

这有意义吗

如果没有，我将再次尝试重新措辞：

在已有的两个if语句中放入另一组if语句。这些选项用于检查在设置较大尺寸时，是否会使较小尺寸超出该方向框的边界。 伪码

if (height > width)
    calculate the height
    calculate the width
    if (width > div.width)
       width = div.width
       height = div.width * aspect;

问我这是否还不够清楚

编辑：没错。如果希望每条边都有白色边框，则需要添加更多代码

编辑2：

Edit3：您也可以尝试使用方面来实现这一点。我为你做了第一个。还剩三个

jQuery.val（）始终返回一个字符串，您应该将其解析为整数

---

你到底想用这个剧本完成什么？是的，我不明白，目的是什么？它可能只需要CSS就可以完成…谢谢，我不明白的是我原来的小提琴。如果我输入200 x 99，我会得到意想不到的结果，但是如果我将高度增加1个像素到200 x 100，它会工作！这就是我真正困惑的地方。很抱歉，但我有点不舒服。但无论如何，做得很好，再次感谢！这与比率有关。有些“临界值”会改变代码的行为方式。首先，200x99由一个IF语句（最下面的语句）处理，而200x100由最上面的语句处理。这是一个人工临界点，由IF语句结构决定。固有临界点是当纵横比和倒数之比与父div的纵横比和倒数之比交叉时。原则上，如果您跨越任何一个“临界点”，并且代码有错误，那么您应该期望这将是错误暴露的时间！嗨，詹姆斯，这是漫长的一天，我刚刚看到你要求我在剧本中加入更多的条件。很抱歉，我真的看不到我需要添加什么作为else if。不，不幸的是，如果我输入45 x 200，它将移出框的底部。今天晚上我会坐下来，争取结果。我基本上需要让它与其他外盒尺寸一起工作。好吧，我想我们已经把它分类了，在这里每个人的帮助下，它给了我足够的信息去挖掘。这是一把有效的小提琴：从这个老问题中得到的信息将其排序，代码稍微修改自最佳答案：哦，太好了，谢谢，看起来我的逻辑是正确的。我猜是错误的数据类型？不，伙计，这不能解决问题。在框中键入2和3。就像我说的，你的逻辑有问题。@jamesmith，是的，在逻辑检查新jsfiddle中有问题。您正在使用父宽度计算高度，使用父高度计算宽度。让我知道我所做的更改是正确的？不，那仍然是不正确的。您的代码没有保留正确的方面。答案在我的答案中。你想要什么，如果输入2和2，那么高度和宽度应该相同，或者高度和宽度都应该覆盖父对象的整个空间？在第二种情况下，宽度可能会超过父宽度，因为您正在根据远大于高度的高度计算宽度。如果你愿意，我们可以聊天

....

        height = parseInt($('#height').val()) || 0;// making 0 as default value.
        width = parseInt($('#width').val()) || 0;
....