调整最小图像尺寸[重复]答案

【问题标题】：Resize SMALLEST image dimension [duplicate]调整最小图像尺寸[重复]
【发布时间】：2014-04-23 04:58:35
【问题描述】：

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

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

600x400 图像的最小尺寸为 400，应为 200，因此按 0.5 缩放：新图像将为 300x200
类似地，400x800 将变为 200x400
100x300 的最小尺寸已经

显然，如果它可以用 css 完成，那么它比 javascript 更可取。

【问题讨论】：

这些不是重复的，它们的最大尺寸为 200...
你不只是颠倒逻辑并做同样的事情吗？
你有没有尝试过？另外，我认为这不能用纯 css 来完成。也许你应该写一些 JS 来测试最大尺寸，然后相应地设置宽度/高度。另一个维度应设置为自动，以便图像保持比例
这个小提琴会让你开始 - jsfiddle.net/kP3TC
@George Stocker：这将如何运作？我可以通过将其安装在 200x200 的盒子中来制作最大尺寸 200。我会选择什么盒子来制作最小尺寸 200？（我只是想说明为什么这是不可能的）。

标签： javascript css image-resizing aspect-ratio

【解决方案1】：

是的，你需要 JS：

LIVE DEMO

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

【讨论】：