jQuery/PHP - 直接按比例调整图像大小答案

【问题标题】：jQuery/PHP - Resize an image with direct proportionjQuery/PHP - 直接按比例调整图像大小
【发布时间】：2011-04-06 04:28:48
【问题描述】：

嗨
假设我有几张不同宽度和高度的图像，我希望它们都适合 200 宽度和 200 高度并成正比的 img 标签（图像不会失真）。

我如何在 PHP 或 Jquery 中做到这一点？

谢谢

【问题讨论】：

标签： php jquery

【解决方案1】：

var max = 200;
$('img').each(function ()
{
    var $this = $(this);
    if ($this.height() > $this.width())
    {
        $this.height(max);
    }
    else
    {
        $this.width(max);
    }
});

http://jsfiddle.net/mattball/qtVkT/

【讨论】：

@Charles - 您无法将 500x800 的图像大小调整为 200x200 而不失真！（除非你想裁剪它）
我可以在图片上填充一些“白边”，这样图片就不会变形了吗？
是的，只要把它放在一个 200x200 的 div 中。

【解决方案2】：

这会将所有具有“图像”类的图像限制为

如果你想让它在一个完美的 200x200 盒子里，把它包装在一个 200x200px 的 div 中

$('.image').each(function(){
   var $this = $(this);
   $this[$this.width() > $this.height() ? 'width' : 'height'](200);
});

【讨论】：

@Matt - 抱歉，没有看到你的答案，是一样的

【解决方案3】：

来自this tutorial：

我们假设缩略图应为 100 像素（宽或高）。
我们加载原始图像并检查其尺寸。
如果图片高于宽度，我们将拇指高度设置为 100 像素。
缩略图的宽度是原始宽度乘以 100 像素除以它的高度。
缩略图高度 = 原始宽度 * (100 / 原始高度)
这样我们可以保留原始纵横比。
如果原始图片比高宽，我们对缩略图的高度做同样的事情。
如果它们相同，我们只需创建一个 100x100 像素的图像。

IMO 使用 jQuery 调整图像大小是一种不好的做法，如果您可以使用 GD 库，我建议您不要这样做。

【讨论】：