使用JS动态调整图片大小

"使用JavaScript自动调整图片尺寸" 在网页开发中，经常需要处理图片的尺寸以适应不同的设备或布局需求。JavaScript提供了一种方法来动态地改变图片的宽度和高度，确保图片不会超出预设的容器大小或者按照特定的比例缩放。这个过程被称为图片尺寸的自动调整。 1. JavaScript函数 `ReSizePic` 的使用 在提供的代码中，定义了一个名为 `ReSizePic` 的JavaScript函数，用于调整图片的大小。函数接受一个参数 `ThisPic`，这通常是HTML中的`<img>`标签。函数首先设定目标宽度 `RePicWidth` 为200像素，然后获取图片的实际宽度 `TrueWidth` 和高度 `TrueHeight`。接下来，计算图片的原始宽高比 `Multiple`，并根据目标宽度调整图片的显示宽度。最后，根据宽高比调整图片的高度，以保持原始比例。 调用这个函数的方法是在`<img>`标签上添加`onload`事件监听器，如： ```html <img src="image.jpg" onload="ReSizePic(this)"> ``` 这样，当图片加载完成时，会自动调用 `ReSizePic` 函数进行尺寸调整。 2. 针对多个图片的尺寸限制 如果有多个图片需要调整，可以遍历页面上的所有`<img>`元素，并应用相同的尺寸调整逻辑。例如，定义一个名为 `ResizeImages` 的函数，循环遍历 `document.images` 集合，对每个图片元素执行相应的调整。你可以设置一个最大宽度 `maxwidth`，然后在循环中检查图片的原始宽度，如果超过最大值，将其宽度设置为最大值。以下是一个简单的示例： ```javascript function ResizeImages() { var maxWidth = 300; for (var i = 0; i < document.images.length; i++) { var myimg = document.images[i]; if (myimg.width > maxWidth) { myimg.width = maxWidth; } } } // 可以在head或body的onload事件中调用此函数 window.onload = ResizeImages; ``` 3. 使用Math.min函数限制图片宽度 另一种更灵活的方法是使用 `Math.min()` 函数，它允许你设置一个最大宽度，但同时保持原始宽高比。这样，如果图片的宽度小于最大宽度，则保持原样；如果大于最大宽度，就将其宽度限制在最大宽度内，同时调整高度以保持比例。如下所示： ```html <img src="demo.gif" onload="this.width = Math.min(this.width, 300)"> ``` JavaScript提供了一种灵活的方式，通过编程方式动态调整图片尺寸，以适应网页的设计和用户体验需求。无论是单个图片还是多个图片，都可以根据实际场景选择合适的调整策略。这种方法尤其适用于响应式设计，确保图片在不同屏幕尺寸下都能正确显示。