一、固定大小
一般，为了限制图片的大小，会使用下面的html属性值或css属性值来定义：
<img src="http://www.linuxfly.org/logo.gif" width="600" height="500" border="0"> img { width: 600px; height: 500px; }
但这样的设置太死板，不够灵活。
二、利用css属性值
img.qtipimg { max-width: 500px; width: 500px; width:expression(this.width > 500 ? "500px" : this.width); overflow:hidden; }
这里定义了一个qtipimg类下面的img标签用css规则，通过max-width属性把图片控制在500px的宽度范围，并且是自适应比例的。
但是，各浏览器对该属性的支持并不一致，如ie6不支持该属性。
所以，后面又增加了一个expression的动作，该操作符后面括号中的语句是javascript脚本，用于动态的调整图片大小的。
而最后的，overflow:hidden 则是为了防止上述两属性定义失效时，将超出设置大小的部分隐藏起来，避免显示异常。
该设定经测试，在ie7、ie8、firefox 3.5 下使用都很正常。
三、利用javascript 脚本
每个浏览器（包括版本不同）对css的支持都会有区别。例如：ie 8下就取消了对expression动作的支持。这时，利用javascript来调整图片大小也是一个不错的方法。但它的缺陷在于，使用纯javascript脚本，在图片下载期间，大小会溢出，直到下载完成，javascript才会把其大小调整到合适的值。
1、借助一个中转的image对象
两个javascript函数：
function getimagesize(filepath) { var imgsize={width:0,height:0}; image=new image(); image.src=filepath; imgsize.width = image.width; imgsize.height = image.height; return imgsize; } function fiximagesize(originalimage) { fixsize = 500; if ( originalimage.width > fixsize ) { originalimage.height = math.round( originalimage.height * fixsize / originalimage.width ); originalimage.width = fixsize; } return originalimage; }
使用时，把图片的地址传递给这两个函数，返回值即为调整后的图片：
img = getimagesize("http://www.linuxfly.org/logo.gif"); img = fiximagesize(img); finalresult = '<img src="'+attachurl+'" width="'+img.width+'" height="'+img.height+'" alt="'+filename+'"/>';
2、在加载完dom后即调整大小
虽然css的expression方式将会被取消，但直接使用javascript方式计算合适的css值还是一个不错的方法。例如jquery的$(document).ready()方法可以避免加载图片时溢出的问题。
以下脚本来自：这里
$(document).ready(function() { $('.post img').each(function() { var maxwidth = 100; // 图片最大宽度 var maxheight = 100; // 图片最大高度 var ratio = 0; // 缩放比例 var width = $(this).width(); // 图片实际宽度 var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽 if(width > maxwidth){ ratio = maxwidth / width; // 计算缩放比例 $(this).css("width", maxwidth); // 设定实际显示宽度 height = height * ratio; // 计算等比例缩放后的高度 $(this).css("height", height * ratio); // 设定等比例缩放后的高度 } // 检查图片是否超高 if(height > maxheight){ ratio = maxheight / height; // 计算缩放比例 $(this).css("height", maxheight); // 设定实际显示高度 width = width * ratio; // 计算等比例缩放后的高度 $(this).css("width", width * ratio); // 设定等比例缩放后的高度 } }); });
以上就是如何使用css调整图片大小的实例代码分享的详细内容。