使用jQuery调整图像大小

Question

情景：

我正在建立一个网站，它不会在自己的服务器中托管图像。相反，它将引用其他服务器的图像。

示例：该网站位于www.mywebsite.com，图片的html类似于<img src=”http://www.otherwebsite.com” />。

来自其他服务器的图像已经被压缩，所以它们不会很重......虽然它们每个都有大约25KB，500x375像素。

---

目标：

我希望在jQuery的帮助下在客户端调整它们的大小。所以他们变成了缩略图。

缩略图有两种尺寸：310x140和80x80像素。

然而，不仅我想调整它们的大小，我可能希望它们被缩放。因为如果原始图像只有260像素宽，这意味着图像需要缩放然后“裁剪”，所以它会填满整个310像素，而不是在两侧留下空白空间。

我知道我的要求太高了。但我认为这是一个“常见”的情况，你们许多人可能已经处理过......所以也许有某种插件可以做到这一点。

我也知道这意味着用户正在加载比他们需要的“更重”的图像，因为如果他们在加载之前已经有310x140（这是缩略图大小），它们会更轻......但是嘿！项目是以这种方式建造的，这不是我的错。

---

研究：

除了“缩放”之外，我确实找到了几乎可以达到我想要的东西。 您可以点击此处查看：http://joanpiedra.com/jquery/thumbs/。

Answer 1

您可以通过保持宽高比轻松完成。

定义最大宽度和最大高度。

通过保持宽高比调整大小。

  if ((h / w) < (maxH / maxW)) {
                $img.css('height', '');
                $mg.css('width', maxW);
            }
            else {
                $Img.css('height', maxH);
                $Img.css('width', '');