1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title></title>
    5. </head>
    6. <body>
    7.     <body>
    8.     <h2>原图片</h2>
    9.     <img src="6.png" alt="500x3500"/>
    10.     <h2>按比例缩放后的图片</h2>
    11.     <img src="6.png" onload="javascript:DrawImage(this,100,100)"/>    
    12. </body>
    13. </body>
    14. </html>
    15. <script type="text/javascript">
    16. function DrawImage(ImgObj, maxWidth, maxHeight){
    17.     var image = new Image();
    18.     //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
    19.     image.src = ImgObj.src;
    20.     // 用于设定图片的宽度和高度
    21.     var tempWidth;
    22.     var tempHeight;
    24.     if(image.width > 0 && image.height > 0){
    25.         //原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度
    26.         if (image.width/image.height >= maxWidth/maxHeight) {
    27.             if (image.width > maxWidth) {
    28.                 tempWidth = maxWidth;
    29.                 // 按原图片的比例进行缩放
    30.                 tempHeight = (image.height * maxWidth) / image.width;
    31.             } else {
    32.                 // 按原图片的大小进行缩放
    33.                 tempWidth = image.width;
    34.                 tempHeight = image.height;
    35.             }
    36.         } else {// 原图片的高度必然 > 宽度
    37.             if (image.height > maxHeight) {  
    38.                 tempHeight = maxHeight;
    39.                 // 按原图片的比例进行缩放
    40.                 tempWidth = (image.width * maxHeight) / image.height;      
    41.             } else {
    42.                 // 按原图片的大小进行缩放
    43.                 tempWidth = image.width;
    44.                 tempHeight = image.height;
    45.             }
    46.         }
    47.         // 设置页面图片的宽和高
    48.         ImgObj.height = tempHeight;
    49.         ImgObj.width = tempWidth;
    50.         // 提示图片的原来大小
    51.         ImgObj.alt = image.width + "×" + image.height;
    52.     }
    53. }
    54. </script>