如何使用jQuery对图像进行缩放

对于通过使用jQuery通过AJAX调用的PHP文件注入的图像进行缩放/调整大小的最佳方法是什么？如何使用jQuery对图像进行缩放

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

此外，如果有办法，我可以用一个已经存在的Flash脚本来做到这一点，但是我不记得任何好的，就像谷歌在那里使用Picasaweb服务一样简单。

在此先感谢

2011-08-13 PT Desu

的HTMLImageElement返回源图像的实际尺寸的naturalWidth和naturalHeight DOM属性。

if (imageElement.naturalWidth > imageElement.naturalHeight) 
    imageElement.style.width = '600px'; 
else 
    imageElement.style.height = '410px';

景观图像例如：http://jsbin.com/ogisej/13
肖像图像例如：http://jsbin.com/ogisej/14
广场图像例如：http://jsbin.com/ogisej/15

注意如何在实施例中，调整大小代码被放入load图像的处理程序，以便在维度信息可用时仅调整它的大小。否则naturalWidth和naturalHeight为零，这会导致问题。如果你是通过看图片不安开始大了，然后收缩，默认情况下隐藏的图像，然后调整后表现出来：

景观形象的例子：http://jsbin.com/ogisej/17
人像形象的例子：http://jsbin.com/ogisej/18
广场形象例如：http://jsbin.com/ogisej/19

无需jQuery的，NOR闪存;）

来源

2011-08-13 02:20:15

你的脚本工作但有似乎是一个问题，如果图像仍被浏览器，它会被注入到灯箱作为其全尺寸而不是被调整，如果u关闭收藏夹，然后单击缓存同样的图像，然后缩小，但否则会加载完整。 –

我的更新后的帖子已经通过在图像的'load'事件处理程序中包装调整大小来解决该问题，这样它只会在大小信息可用时尝试调整大小。 –

非常感谢你，以及它似乎我完全阻碍我不知道如何，但它似乎问题是由JSON获取字符串“＆maxsize = 500”varialbe导致强制图像显示为500x500px damm，如何这可能会发生，我重写了这么多的上帝damm代码，因为这 –

下面是一些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就可以了。

来源

2011-08-13 02:28:16 Nathan

如果你想要一个不同的最大宽度和最大高度？ –

将'max_size'改为任何你想要的。 OP希望能够调整图像的大小而不会扭曲它。 – Nathan

的工作，但我仍然在抨击我的头到键盘的边缘似乎应用程序通过从Picasaweb通过JSON提取图像那里已经调整了一些原因 –

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

// 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" 
    })); 
};

来源

2011-08-13 03:07:47

如何使用jQuery对图像进行缩放

回答

相关问题