JS实现图片等比例缩放显示：代码实例与教程

本文主要介绍了如何使用JavaScript实现图片的动态调整显示大小，特别是在保持图片等比例缩放的前提下，根据设定的最大宽度（maxWidth）和最大高度（maxHeight）来自动调整图片尺寸。以下是对该技术的详细解释： 首先，定义了一个名为`AutoResizeImage`的JavaScript函数，它接收三个参数：maxWidth、maxHeight以及待处理的图片对象`objImg`。这个函数的主要目的是确保图片在浏览器中按照用户指定的最大尺寸显示，同时保持图片的原始宽高比。 在函数内部，创建了一个新的`Image`对象`img`，并设置其源URL为`objImg.src`，这样可以获取图片的原始尺寸。然后计算了图片的原始宽度`w`和高度`h`，以及它们与最大尺寸的比率，即`wRatio`（宽度比例）和`hRatio`（高度比例）。 接下来，根据提供的最大宽度和高度判断应采用哪种比例进行缩放： 1. 如果用户没有指定最大尺寸（maxWidth 和 maxHeight 都为0），则保持原始比例。 2. 如果只设置了宽度而高度未设置，那么根据宽度的比例决定缩放。 3. 同理，如果只设置了高度而宽度未设置，根据高度的比例决定缩放。 4. 如果两个尺寸都小于1（意味着需要缩放），则取较小的比例。 最后，如果缩放比例小于1，说明需要缩小图片，通过将宽度和高度乘以`Ratio`来调整图片尺寸。调整后的尺寸应用到`objImg`上，更新其`width`和`height`属性。 在HTML部分，有一个例子展示了如何在图片加载完成后调用这个函数，使用`onload`事件触发`AutoResizeImage`。这里的图片链接地址被省略，但可以理解为一个实际的图片URL。 总结来说，这篇教程教会了读者如何使用JavaScript动态调整图片显示大小，并确保图片在浏览器中以用户指定的最大尺寸或保持原始比例进行等比例缩放，这对于响应式设计和网页优化非常有用。