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语句将覆盖第一条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");
}

检查与最大尺寸相比较大的尺寸可确保在进行缩放时，将最大尺寸上的最大尺寸缩放为max，这样其他尺寸有时仍不会超过max

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))

在高度和宽度都需要更改时保持宽高比

2 个答案: