### JS等比例缩小图片尺寸的实现方法
#### 知识点概述
在现代网页开发中，图片优化是一项非常重要的任务，特别是在移动设备普遍使用的今天，过大的图片不仅会增加加载时间，还可能影响用户的浏览体验。因此，实现图片的等比例缩放就显得尤为重要。本文将详细介绍如何使用JavaScript实现图片的等比例缩小，并对提供的代码示例进行深入分析。
#### 关键技术点
1. **图片加载事件**：`onload` 事件用于在图片加载完成后执行特定的脚本。
2. **图片尺寸获取与调整**：通过 `objImg.width` 和 `objImg.height` 获取并调整图片的尺寸。
3. **等比例缩放原理**：根据图片原始尺寸和目标尺寸之间的关系，计算出缩放比例，从而保持图片的比例不变。
#### 详细解释
##### 图片加载事件 (onload)
当图片被加载到浏览器中时，会触发 `onload` 事件。利用这个事件，我们可以确保在图片完全加载完成之后再对其进行操作，避免因图片未加载完毕而导致的尺寸获取错误或渲染异常。
```javascript
<img src="" onload="changeImg(this);"/>
```
在这段代码中，`onload="changeImg(this);"` 指定了当图片加载完成后，将调用 `changeImg` 函数，并传入当前图片元素 (`this`) 作为参数。
##### 图片尺寸获取与调整
在 `changeImg` 函数中，我们首先获取了图片的宽度 (`objImg.width`) 和高度 (`objImg.height`)。接下来，通过比较图片的宽度和预设的最大宽度 (`most`) 来判断是否需要进行缩放。
```javascript
function changeImg(objImg) {
var most = 690; // 设置最大宽度
if (objImg.width > most) {
var scaling = 1 - (objImg.width - most) / objImg.width;
// 计算缩小比例
objImg.width = objImg.width * scaling;
objImg.height = objImg.height; // img元素没有设置高度时将自动等比例缩小
// objImg.height = objImg.height * scaling; // img元素设置高度时需进行等比例缩小
}
}
```
- **设置最大宽度**：`var most = 690;` 表示如果图片宽度超过 690 像素，则需要进行缩放处理。
- **计算缩小比例**：`var scaling = 1 - (objImg.width - most) / objImg.width;` 这里计算出图片应该按照多少的比例进行缩放。例如，如果原图宽度为 700 像素，则 `scaling` 的值为 `0.9857`，表示图片需要缩小大约 1.43%。
- **调整图片尺寸**：`objImg.width = objImg.width * scaling;` 该行代码实现了图片宽度的调整。同时，如果图片的高度没有预先设定，则高度也会自动按比例调整。如果希望显示设定的高度，可以通过 `objImg.height = objImg.height * scaling;` 明确地进行高度调整。
##### 总结
通过以上步骤，我们成功地实现了图片的等比例缩放。这种方法不仅可以提升网站的性能，还能保证图片的视觉效果不受影响。此外，这种方式也十分灵活，可以根据实际需求调整最大宽度、是否固定高度等参数，以适应不同的应用场景。在实际项目中，还可以考虑加入更多的优化措施，如懒加载、不同分辨率下的图片选择等，进一步提高网页的性能表现。
