JavaScript实现图片等比例缩放的代码示例

"这篇文章主要讲解了如何使用JavaScript实现图片等比例缩放的功能，通过一个完整的实例展示了如何利用JavaScript操作页面中的图片元素属性。" 在网页设计中，有时我们需要确保图片在不同屏幕尺寸下能保持其原始比例进行缩放，以避免图片变形。JavaScript 提供了一种方法来动态调整图片大小，使其按比例缩放，适应不同的浏览器窗口或设备屏幕。以下是一个完整的JS图片等比例缩放的示例： 首先，我们需要创建一个函数，例如`AutoResizeImage`，它接受三个参数：最大宽度（maxWidth）、最大高度（maxHeight）以及要缩放的图片对象（objImg）。这个函数的核心在于计算缩放比例，以确保图片不会超出设定的最大尺寸，并且保持原有的纵横比。 ```javascript function AutoResizeImage(maxWidth, maxHeight, objImg) { var img = new Image(); img.src = objImg.src; // 计算比例 var hRatio, wRatio, ratio = 1; var w = img.width; var h = img.height; // 根据最大宽度和高度计算比例 wRatio = maxWidth / w; hRatio = maxHeight / h; // 检查是否需要缩放 if (maxWidth == 0 && maxHeight == 0) { // 无限制 ratio = 1; } else if (maxWidth == 0) { // 只限高度 if (hRatio < 1) ratio = hRatio; } else if (maxHeight == 0) { // 只限宽度 if (wRatio < 1) ratio = wRatio; } else { // 既限宽度又限高度 ratio = (wRatio <= hRatio ? wRatio : hRatio); } // 应用缩放 if (ratio < 1) { w = w * ratio; h = h * ratio; } // 更新图片元素的宽高 objImg.height = h; objImg.width = w; } ``` 在这个示例中，`new Image()` 创建了一个新的图片对象，用于获取图片的实际大小（不受CSS约束）。然后通过比较原图的宽度和高度与指定的最大尺寸，计算出合适的缩放比例。最后，将缩放后的宽度和高度应用到图片元素上。 为了在图片加载完成后自动调用这个函数，可以在HTML中设置`onload`事件监听器，例如： ```html <img src="1.jpg" border="0" width="0" height="0" onload="AutoResizeImage(800, 600, this)"> ``` 这里，`onload`事件会在图片加载完成后执行`AutoResizeImage`函数，传入最大宽度800像素、最大高度600像素以及当前图片元素自身作为参数。 这种技术适用于响应式设计，能够确保图片在不同分辨率和屏幕尺寸下保持良好的视觉效果。同时，它还可以防止大图片加载时对网页性能的影响，通过提前缩放减少加载的数据量。使用JavaScript进行图片等比例缩放是优化网页显示效果的一个实用技巧。