使用jQuery调整图像大小 [英] Resize image with jQuery

问题描述

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

I’m building a website, which will not Host the images in its own server. Instead it will reference images from other servers.

示例：该网站托管在www.mywebsite.com，图像的html将类似于< img src =http://www.otherwebsite.com/> 。

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

The images from the other servers will be already compressed, so they won’t be very heavy… although they will have around 25KB each, with 500x375 pixels.

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

I want to resize them on the client side, with the help of jQuery. So they became thumbnails.

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

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

However, not only I want to resize them, has I probably would want them to be zoomed. Because if the original image is only 260px wide, that means that the image would need to be zoomed and then "cropped", so it would fill the full 310px instead of leaving an empty space on the sides.

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

I know that I am being too demanding. But I thought that this was a "common" situation that many of you may had dealt with already… so maybe there is some sort of plugin that would do this.

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

I also know that this means that the user is loading images "heavier" than they are needed, because if they already had 310x140 before loading (which is the thumbnail size), they would be much lighter… but hey! It isn’t my fault that the project was built this way.

我确实发现了一些差不多的东西做了我想要的，除了缩放。
您可以点击此处查看： http://joanpiedra.com/jquery/thumbs/。

I did found something that almost did what I wanted, with the exception of the "zooming". You can check by clicking here: http://joanpiedra.com/jquery/thumbs/.

推荐答案

您可以通过保持宽高比轻松实现。

you can easily do it by maintaining the aspect ratio.

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

define max width and max height.

维持宽高比调整大小。

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

这篇关于使用jQuery调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！