调整最小图像尺寸

Question

这似乎是以前会被问到的问题，但我找不到重复的问题，所以...

我想要将图像的最小尺寸缩放到最大200，同时保持纵横比。 所以：

• 600x400像素的图像最小尺寸为400，应该为200，因此按0.5缩放：新图像将为300x200
• 同样，400x800将变为200x400
• 100x300的最小尺寸已经小于200，因此它将保持100x300。

显然，如果可以使用CSS完成，则优先使用CSS而不是JavaScript。

- Mark

---

这些不是重复项，它们使最大维度为200... - Mark

你是否只需反转逻辑并执行相同的操作？ - George Stocker

你尝试过什么吗？此外，我认为这不能仅通过 CSS 实现... 可能你应该编写一些 JS 来测试最大维度，然后相应地设置宽度/高度。另一个维度应设置为自动，以便图像保持比例。 - donnywals

这个代码片段可以帮助你入门 - http://jsfiddle.net/kP3TC/ - TimSPQR

@George Stocker：那该怎么做呢？我可以通过将其放入一个200x200的盒子中来使最大尺寸为200。那么我应该选择什么样的盒子才能使最小尺寸为200呢？（我只是问这个问题来说明为什么这是不可能的）。 - Mark

Answer 1

是的，你需要使用JavaScript：

演示链接

function scale(W, H, max) {
  var min = Math.min(W, H),        // Get the smallest size
      nr  = min>max,               // NeededResize (Boolean)
      rat = Math.min(max/W, max/H);// Ratio
  return {
    W: nr?W*rat:W, // if NeededResize do W*rat, else just use the image W
    H: nr?H*rat:H
  };
}

// Use like: scale(imageWidth, imageHeight, maxSizeToRespect);
var resize = scale(this.width, this.height, 200);
// Where from now on
resize.W // is the returned width scale
resize.H // is the returned height scale

- Roko C. Buljan