js 图片等比例缩放代码

在网页设计中，图片的展示效果对于用户体验至关重要。有时候，我们希望图片能在不同的屏幕尺寸下保持等比例缩放，以适应各种设备。JS（JavaScript）作为一种动态脚本语言，能够帮助我们实现这一需求。本文将深入讲解如何使用JavaScript实现图片等比例缩放，并通过示例代码进行详细解释。 我们要明白等比例缩放的原理。等比例缩放是指在调整图片大小时，保持其宽度和高度的比例不变，避免图像失真。在JS中，我们可以获取到图片的原始宽高，然后根据目标尺寸计算出新的尺寸，确保宽高比一致。 上述代码定义了一个名为`scaleImage`的函数，它接受三个参数：`o`表示要缩放的图片元素，`w`表示目标宽度，`h`表示目标高度。函数首先创建一个新的`Image`对象，设置其`src`属性为传入图片元素的`src`，然后检查图片是否已经加载完成（即`width`和`height`不为0）。 如果图片的原始宽高比（`img.width / img.height`）大于或等于目标宽高比（`w/h`），说明图片更宽或者一样宽，这时我们需要基于宽度进行缩放。如果图片的原始宽度大于目标宽度，我们设定图片的宽度为目标宽度，然后根据原始宽高比计算新的高度。反之，如果原始宽度小于目标宽度，我们则保持原始尺寸不变。 如果图片的原始宽高比小于目标宽高比，意味着图片更高，我们基于高度进行缩放。如果图片的高度大于目标高度，我们设定图片的高度为目标高度，然后根据原始宽高比计算新的宽度。如果高度小于目标高度，则保持原始尺寸不变。 在HTML部分，可以看到四个`<img>`标签，每个都设置了`onload`事件，当图片加载完成后调用`scaleImage`函数，传入当前图片元素以及预设的目标宽度和高度。这样，图片会根据设定自动等比例缩放。 总结一下，实现JS图片等比例缩放的关键在于： 1. 获取图片的原始宽高。 2. 计算图片与目标尺寸的宽高比。 3. 根据宽高比判断是基于宽度还是高度缩放。 4. 调整图片尺寸，保持等比例。 5. 在HTML中使用`onload`事件触发缩放函数。 通过这样的方法，我们可以在不同场景下保证图片的显示效果，使网页更具响应性和适应性。同时，这种技术也有助于优化页面加载速度，尤其是对于大图资源，可以预先进行等比例缩放，减少加载负担。