jQuery实现按比例缩放图片

　2010-09-14 13:41:23　来源：WEB开发网　　　

核心提示：在网站中通常要显示各种尺寸的图片，但图片的尺寸不一定符合显示的要求，jQuery实现按比例缩放图片，如果直接指定img的width和height属性的话图片又很可能会被挤压的变形，下面这个代码可以把图片放进一个imgBox，并根据imgBox的大小来按比例缩放图片以适应他，同时图片会在imgBox中居中显示

在网站中通常要显示各种尺寸的图片，但图片的尺寸不一定符合显示的要求。如果直接指定img的width和height属性的话图片又很可能会被挤压的变形。下面这个代码可以把图片放进一个imgBox，并根据imgBox的大小来按比例缩放图片以适应他，同时图片会在imgBox中居中显示。来看代码：

首先是HTML：

　1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 　2<html xmlns="http://www.w3.org/1999/xhtml"> 　3<head> 　4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 　5<title>按比例自动缩放图片</title> 　6 　7<script type="text/javascript" src="js/jquery.js"></script> 　8<script type="text/javascript" src="js/drawImg"></script> 　9</head> 10 11<body> 12<div id="imgBox" style="width:500px; height:400px; background:#cccccc; overflow:hidden"> 13　　　 <img id="img1" alt="" src=http://tech.ddvip.com/2009-03/"images/1.jpg" onload="DrawImg(500,400);" /> 14</div> 15</body> 16</html>

再是JavaScript：

　1function DrawImg(boxWidth,boxHeight) 　2{ 　3　　　 var imgWidth=$("#img1").width(); 　4　　　 var imgHeight=$("#img1").height(); 　5　　　 //比较imgBox的长宽比与img的长宽比大小　6　　　 if((boxWidth/boxHeight)>=(imgWidth/imgHeight)) 　7　　　 { 　8　　　　　　　 //重新设置img的width和height 　9　　　　　　　 $("#img1").width((boxHeight*imgWidth)/imgHeight); 10　　　　　　　 $("#img1").height(boxHeight); 11　　　　　　　 //让图片居中显示 12　　　　　　　 var margin=(boxWidth-$("#img1").width())/2; 13　　　　　　　 $("#img1").css("margin-left",margin); 14　　　 } 15　　　 else 16　　　 { 17　　　　　　　 //重新设置img的width和height 18　　　　　　　 $("#img1").width(boxWidth); 19　　　　　　　 $("#img1").height((boxWidth*imgHeight)/imgWidth); 20　　　　　　　 //让图片居中显示 21　　　　　　　 var margin=(boxHeight-$("#img1").height())/2; 22　　　　　　　 $("#img1").css("margin-top",margin); 23　　　 } 24} 25