基于jQuery的图像不会按比例自动减少。

例如

第一种情况是：图像的大小为600×350，显示区域的大小为200×140。如果根据目标宽度（200）将图像缩放到116，那么它将在200×140处变得丑陋。

第二种情况正好相反。例如，图像的大小为400×400，显示区域为200×140。如果图片按目标高度（140）缩放，它将变成140到140, 140。下图是正确的
当使用jQuery获取图片的大小时，判断图像大小会更好一些。例如，在第一种情况下，宽度是140×600 350＝240，根据140高度，然后图片显示为240×140，冗余部分由溢出隐藏：CSS的隐藏。

下面是我的方法：（注意-这里所说的是原始图片的宽度比目标显示框的大小大-所以它被称为缩小）。
演示。

HTML的一部分

如果显示区域的类是缩略图

复制代码代码如下所示：

CSS部分

复制代码代码如下所示：

。缩略图{溢出：隐藏；宽度：200px；身高：140px；}
jQuery的一部分

1。当然是先挂jQuery库，怎么挂自谷歌、百度

2。core code
jQuery（文档）Ready（函数（））{
*图片不完全按照zwwooooo * 自动缩小比例/
$（窗口）加载（函数（）{）
$（#内容div.thumbnail IMG）。每个（函数（）{（）{
var x = 200；填充目标图像宽度
var = 140；填充目标高度。
var = $（这个）（宽度），H = $（这个）（高度）；获取图片宽度和高度。
如果宽度大于目标宽度
无功w_original = W，h_original = H；
h *（x w）；按目标宽度按比例计算
w = x；宽度等于预定宽度。
如果在高度小于预定高度时缩小（如果）
W = w_original *（Y / / / h_original）；根据目标重新计算宽度高度
高度等于预定高度。
}
}
$（这）。Attr（{宽度W，高度：H }）；
}）；
}）；
}）；
应用场合：固定大小的图片显示区域，如缩略图。

结束了。

下面是内容页中常用图片大小控制代码的建议：
$（窗口）加载（函数（）{）
$（。续IMG）。每个（函数（）{）
VaR最大= 800；
如果（$（this）。Width（）> maxwidth）{
$（这）Width（最大）；
}
}）；
}）；
代码不需要解释，值得注意的是两个地方是：

第一：$（窗口）。加载（函数（）{）

声明事件的部分使用$（窗口）加载，不能使用$（文档）。

我看到一些相关的文章在百度和iteye，和方法都是错误的。它不会在所有的工作。

第二：$（。续IMG）。每个（function（））

这里是每个（函数（{）}），其中每一个都是一个接一个调用指定图片集合对象的方式。

这种方法与大多数浏览器兼容，效果非常方便。

就个人而言，这种方法更方便，可以扩展到缩略图控件方法。