例如

第一种情况：如果图片尺寸是600350，显示区域尺寸是200140，如果图片按照目标宽度(200)缩放，尺寸变成116，在200140显示会很难看。下图是左图

第二种情况：相反，如果图片的尺寸是400400，显示面积也是200140。如果按照目标高度(140)缩放图片，尺寸变成140，也就是140140，也很难看。下图是对的

这时候用jQuery得到图片大小再判断处理好一点：比如第一种情况，按照140的高度，宽度是140600/350=240，然后按照240140显示图片，多余的用css的overflow:hidden隐藏。

以下是我的处理方法：(注意——这里提到的是——，当原始图片的宽度和高度大于目标显示框的尺寸时，称为缩小)

演示”在这里

Html部分

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

复制的代码如下： div ID=' content ' div class=' thumbnail ' img src=' http : ' alt=' '//div/div

Css部分

复制代码如下：缩略图{溢出：隐藏；宽度width:200px高度：140 px；}

JQuery部分

1.当然，jQuery库是先挂的。如何挂谷歌和百度2？核心代码

Jquery(文档)。ready (function () {/*图片不会被zwwoooo */$(window)自动缩小。load (function () {$ ('# content div。缩略图img’)。每个(函数(){ var x=200//填入目标图片宽度var y=140//填入目标图片高度var w=$(这个)。width()，h=$ (this)。高度()；//获取图片宽度和高度if (w x) {//当图片宽度大于目标宽度时，var w _ original=w，h _ original=hh=h *(x/w)；//根据目标宽度按比例计算高度w=x；//如果按比例缩小的高度小于预定高度，则宽度等于预定宽度if(h y){//w=w _ origin *(y/h _ origin)；//根据目标高度重新计算宽度h=y；//高度等于预定高度}} $(这个)。attr({宽度：w，高度：h })；});});});适用场所：固定大小的图片显示区，如缩略图。

历经磨难。

以下是内容页面中常用的一些推荐图片大小控制代码：

脚本类型='text/javascript'$(窗口)。load(function() { $(')。cont img’)。每个(function(){ var maxwidth=800；if ($(this)。width() maxwidth) { $(this)。宽度(max width)；}});});/script代码无需解释，但值得注意的是有两个地方：

第一个：$(窗口)。load(function(){ 0

使用$(窗口)。用于声明事件的load，但不是$(document).ready .我在百度和iteye网站上看到过相关文章，方法都不对。一点用都没有。

第二个：$('。cont img’)。每个(函数()

这是。每个(函数(){ 0.})，每个)，其中每个都为指定的图片集合对象逐个调用以下方法。

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

个人觉得这个方法比较方便，可以扩展到缩略图控制方法。