JavaScript实现图片等比例缩放代码详解

"javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创" 本文主要介绍了一个使用JavaScript实现的函数，用于在网页中等比例缩放指定区域内所有图片的功能。这个功能对于保持网页布局的一致性和美观性至关重要，尤其是在内容区域包含不同尺寸图片时。该代码适用于限制图片大小，以适应特定的宽度和高度，确保图片不会超出设定的容器边界。 函数名为`controlImg`，接受三个参数：`ele`表示要操作的元素（通常是包含图片的容器），`w`是容器的宽度，`h`是容器的高度。函数通过遍历`ele`下的所有`img`标签，计算每个图片的原始宽度`w0`和高度`h0`，以及相对于容器的比例`t1`和`t2`。如果图片的宽或高超过容器的对应边，函数将按比例缩小图片，保持其原有的纵横比。 具体缩放逻辑如下： 1. 计算图片的原始宽度与容器宽度的比例`t1`和原始高度与容器高度的比例`t2`。 2. 如果`t1`大于1或`t2`大于1，说明图片至少有一边超出了容器的对应边。 3. 使用`Math.floor()`函数对新的宽度和高度进行向下取整，以确保不出现浮点数。 4. 对于IE浏览器，使用`outerHTML`属性替换图片为一个链接，链接指向原图，并在新窗口打开。 5. 对于非IE浏览器，添加`title`属性提示用户可以在新窗口打开图片，并通过`onclick`事件处理函数实现点击图片时在新窗口打开原图。 在页面加载完成后，通过`window.onload`事件调用`controlImg`函数，传入`document.getElementById("content")`作为要处理的元素，以及670和980作为容器的宽度和高度。 测试代码示例中，作者展示了如何应用这个函数到一个ID为`content`的元素上，这个元素可能包含了需要被缩放的图片。同时，还提供了两个不同的例子来区分需要控制缩放的区域和不需要控制的区域，以帮助读者更好地理解和应用这段代码。 这个JavaScript代码片段提供了一种有效的方法来等比例缩放网页中指定区域内的图片，以适应不同的屏幕尺寸和布局需求，同时保持了图片的原始比例，提高了用户体验。