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

Question

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

值不得超过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");
    }

为了实现它，请访问： https ： //codepen.io/anon/pen/XBEvNO

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

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

Answer 1

首先，如果您不希望值超过其最大值，但是想要缩放图像以保持比率，则需要将大小值设置为最大值，然后才能计算得到的宽度/高度宽度/高度的变化。

其次，如果你想要比率是相同的，那么你不应该同时改变高度和宽度，因为如果你改变宽度，那么只有一个其他高度值可以保持比率

对此的数学计算如下：

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");
}

这不仅需要改变，因此比率是适当的比例，但是你需要改变你使它变小的代码。

如果按比例，你不是指原始图像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");
}

检查与其最大尺寸相比较大的尺寸可确保在缩放发生时，最大尺寸上的最大尺寸缩放到最大尺寸，这样另一尺寸在某些时候仍然不会超过最大尺寸

Answer 2

你需要决定是否按照height/maxHeight或width/maxWidth的比例进行缩放，然后看看你可以使用哪一个而不会使另一个尺寸太大。 另一种思维方式是：如果我们最大化宽度，高度是否会变得太大？ 如果没有最大化宽度，否则最大化高度。 无论哪种方式，我们按宽度和高度的相同比例缩放，因此纵横比保持不变。 （您可能希望添加除以零的健全性检查）

 function resize(size, max){ // can we maximize the width without exceeding height limit? let resize_factor = (size.height / ( size.width/max.width)) <= max.height ? size.width/max.width : size.height/max.height return {width: size.width/resize_factor, height: size.height/resize_factor} } let max = { width: 100, height: 50 } console.log(resize({width: 500, height:50}, max)) console.log(resize({width: 500, height:1000}, max)) console.log(resize({width: 40, height:10}, max)) console.log(resize({width: 1, height:2}, max)) console.log(resize({width: 2, height:1}, max))