近期做一个驾考项目，由于每张图片加载的时候比例大小都不一样，在试题练习中加载图片时大部分图片会变形，导致图片展示效果非常差，所以我们可以获取图片的原始宽高，然后以等比例展示，效果会非常好。以下就是实现方法：
html：
<img style="max-height: 200px;max-width: 300px" src="demo.png"; onload="javascript:DrawImage(this,200,300);/>
js:
/*** 图片按宽高比例进行自动缩放* @param ImgObj*缩放图片源对象* @param maxWidth*允许缩放的最大宽度* @param maxHeight*允许缩放的最大高度* @usage *调用：<img src="图片" onload="javascript:DrawImage(this,300,200)">*/function DrawImage(ImgObj, maxWidth, maxHeight){var image = new Image();//原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）image.src = ImgObj.src;// 用于设定图片的宽度和高度var tempWidth;var tempHeight;if(image.width > 0 && image.height > 0){//原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度if (image.width/image.height >= maxWidth/maxHeight) {if (image.width > maxWidth) {tempWidth = maxWidth;// 按原图片的比例进行缩放tempHeight = (image.height * maxWidth) / image.width;} else {// 按原图片的大小进行缩放tempWidth = image.width;tempHeight = image.height;}} else {// 原图片的高度必然 > 宽度if (image.height > maxHeight) { tempHeight = maxHeight;// 按原图片的比例进行缩放tempWidth = (image.width * maxHeight) / image.height;} else {// 按原图片的大小进行缩放tempWidth = image.width;tempHeight = image.height;}}// 设置页面图片的宽和高ImgObj.height = tempHeight;ImgObj.width = tempWidth;// 提示图片的原来大小ImgObj.alt = image.width + "×" + image.height;}}
