Question

缩放/调整图像的最佳和最快的方法是注入PHP文件，该文件是通过AJAX使用jQuery调用的？

所以我试图确保图像不会绕过600px的宽度和410px的高度，但我不希望图像最大化这个尺寸并且看起来很奇怪，它必须显示为原样，但只是规模较小。

此外，如果有一种方法，我可以使用现有的Flash脚本来做到这一点，但是我不记得任何好的，就像Google在Picasa网络服务上使用的那样简单。

提前致谢

Answer 1

以下是一些有效的jQuery：

var max_size = 200;
$("img").each(function(i) {
  if ($(this).height() > $(this).width()) {
    var h = max_size;
    var w = Math.ceil($(this).width() / $(this).height() * max_size);
  } else {
    var w = max_size;
    var h = Math.ceil($(this).height() / $(this).width() * max_size);
  }
  $(this).css({ height: h, width: w });
});

请点击此处查看：http://jsfiddle.net/QgDEk/

图像的原始大小很大，但该脚本会调整大小。

以下是tutorial。

Answer 2

naturalWidth的{{1}}和naturalHeight DOM属性会返回源图像的实际尺寸。

HTMLImageElement

风景图片示例：http://jsbin.com/ogisej/13
纵向图片示例：http://jsbin.com/ogisej/14
方形图片示例：http://jsbin.com/ogisej/15

请注意，在示例中，调整大小代码放在图像的if (imageElement.naturalWidth > imageElement.naturalHeight) imageElement.style.width = '600px'; else imageElement.style.height = '410px';处理程序中，以便仅在维度信息可用时调整其大小。否则load和naturalWidth为零，这会导致问题。如果你看到图像开始变大，然后收缩，默认隐藏图像然后在调整大小后显示它就会感到不安：

风景图片示例：http://jsbin.com/ogisej/17
纵向图片示例：http://jsbin.com/ogisej/18
方形图片示例：http://jsbin.com/ogisej/19

不需要jQuery，也不需要Flash;）

Answer 3

以下是支持最大宽度和高度的示例。

// Set max width and height
var maxHeight = 50,
    maxWidth = 40;

// Create new image
myImage = new Image();
myImage.src = 'http://dummyimage.com/600x400/000/fff';

// On load of image
myImage.onload = function() {

    var width = myImage.width,
        height = myImage.height,
        ratio = Math.min(maxWidth / width, maxHeight / height);

    newWidth = parseInt(ratio * width);
    newHeight = parseInt(ratio * height);

    $('body').append('<p>Original: ' + width + ' x ' + height + '</p>');
    $('body').append('<p>Max: ' + maxWidth + ' x ' + maxHeight + '</p>');
    $('body').append('<p>Resized: ' + newWidth + ' x ' + newHeight + '</p>');

    // Add new image
    $('body').append($('<img>', {
        src: 'http://dummyimage.com/' + newWidth + 'x' + newHeight + '/000/fff',
        width: newWidth,
        height: newHeight,
        alt: "Test Image",
        title: "Test Image"
    }));
};

如何使用jquery缩放图像

3 个答案: