Javascript 当高度和宽度都需要更改时保持纵横比

我正在尝试根据给定的值（宽度/高度）调整图像大小

值不得超过maxheight和maxwidth，但必须保持比率

现在，如果我将高度或宽度设置得太大，它会起作用，但如果两者都被触发，它就不起作用。这是一个逻辑错误，有人能帮我吗

if (maxwidth <= width || maxheight <= height) {

    if(width > maxwidth) {
      var newheight = height * (maxwidth/width);
      newwidth = maxwidth;
      console.log("new height");
    }
    if(height > maxheight) {
      var newwidth = width * (maxheight/height);
      newheight = maxheight;
      console.log("new width");
    }

if（最大宽度最大高度）{
var newwidth=宽度*（最大高度/高度）；
newheight=maxheight；
console.log（“新宽度”）；
}

要使其发挥作用，请点击此处：

如果宽度为1500，高度为600，则会发生错误

---

我知道这是因为第二个if语句覆盖了第一个if语句，但我不知道如何修复这个逻辑。

您需要决定是按

height/maxHeight

还是

width/maxWidth

的比率进行缩放，然后看看可以使用哪一个，而不会使另一个维度太大。另一种思考方式是：如果我们最大化宽度，高度是否会变得太大？如果没有最大化宽度，则最大化高度。无论哪种方式，我们都按相同的宽度和高度比例缩放，因此纵横比保持不变。（您可能希望为“除以零”添加健全性检查）

函数调整大小（大小，最大值）{
//我们能在不超过高度限制的情况下最大化宽度吗？
让resize_factor=（size.height/（size.width/max.width））首先，如果您不希望值超过其最大值，但确实希望缩放图像以保持比率，则需要将大小值设置为最大值，然后再根据宽度/高度的变化计算出结果宽度/高度

其次，如果希望比率相同，则不能同时更改高度和宽度，因为如果更改宽度，则正好有一个其他高度值可以保持比率

这方面的数学计算如下：

R=比率（假设最大值是您想要的比率R=MaxWidth/MaxHeight）

H=高度

W=宽度

W=H*R

H=W/R

if (maxwidth <= width) {

if(width > maxwidth) {
  newwidth = maxwidth;
  var newheight = newwidth / (maxwidth/maxheight);
  console.log("new height");
}

if（最大宽度最大宽度）{
newwidth=maxwidth；
var newheight=newwidth/（maxwidth/maxheight）；
控制台日志（“新高度”）；
}

这不仅需要更改，以便比率是适当的比率，而且还需要更改用于使其变小的代码

如果您所说的比率不是指原始图像W/H的比率，请澄清

要保持输入用户比率，请尝试以下操作：

if (maxwidth <= width || maxheight <= height) {
var ratio = width/height;
var heightRatio = height/maxheight;
var widthRatio = width/maxwidth
if(width > maxwidth && widthRatio >= heightRatio) {
  newwidth = maxwidth;
  var newheight = newwidth / ratio;
  console.log("new height");
}
else if(height > maxheight && heightRatio > widthRatio) {
  newheight = maxheight;
  var newwidth = newheight * ratio;
  console.log("new width");
}

if（最大宽度=高度比）{
newwidth=maxwidth；
var newheight=newwidth/比率；
控制台日志（“新高度”）；
}
否则如果（高度>最大高度和高度比>宽度比）{
newheight=maxheight；
var newwidth=newheight*比率；
console.log（“新宽度”）；
}

检查较大的尺寸与其最大尺寸的比较可以确保在进行缩放时，最大尺寸超过最大尺寸的尺寸会缩放到最大，这样其他尺寸在某些时候不会超过最大值
您可以为几个不同的值添加输入和预期输出吗？基本上，我认为唯一有问题的值m是宽度和高度大于最大值时的值。高度可以调整，但宽度不能调整。因此，如果尝试1500x600，您将看到它是如何溢出容器的。我需要它保持在内部。图像是动态生成的。用户输入图像大小的值，然后创建图像。问题是框创建的图像只有一定的大小，因此比例必须在该框内。基本上，我需要在框内创建图像并保持其真实比例。我又进行了一次更新，以修复您可能遇到的错误。我希望这有帮助：）我想我在测试时发现了该错误。我发现了另一个错误，如果我使用1200x600的值，则比率不为not更改。1201x600会。是的，我刚刚意识到我又犯了一个错误。不太可能发生，但在您的情况下确实发生了。如果高度比和宽度比设法完全相同，则不会发生任何事情。要纠正此问题，只需更改宽度比>高度比-宽度比>=高度比。很高兴这有帮助！这就是我发现的错误！