JS控制图片等比例缩放的示例代码

HTML部分:

<div id="imageContainer" style="width: 500px; overflow: hidden; position: relative;">
    <img id="myImage" src="your-image-url.jpg" alt="Demo Image" style="position: absolute; top: 0; left: 0; width: auto; height: auto; max-width: 100%; max-height: 100%;">
</div>

注意：这里的``标签使用了`max-width: 100%;`和`max-height: 100%;`来确保图片不会超过容器的尺寸，并且由于设置了`width: auto;`和`height: auto;`，图片将保持其原始的宽高比。`position: absolute;`与`top: 0; left: 0;`是为了确保图片在容器内正确定位。

然而，在某些情况下，你可能需要根据容器的宽度动态计算图片的宽度和高度。虽然直接在HTML中通过样式实现等比例缩放是推荐的做法，但如果你需要在JavaScript中动态处理，以下是一个示例代码：

function resizeImage(containerId, imageId, maxWidth) {
    const container = document.getElementById(containerId);
    const img = document.getElementById(imageId);
    
    // 假设你已经知道图片的原始尺寸或者通过某些方式获取
    // 这里我们使用模拟的原始宽度和高度
    let originalWidth = 800; // 假设原始宽度
    let originalHeight = 600; // 假设原始高度
    
    // 计算缩放比例
    let ratio = maxWidth / originalWidth;
    
    // 计算新的宽度和高度
    let newWidth = originalWidth * ratio;
    let newHeight = originalHeight * ratio;
    
    // 设置图片的新尺寸
    img.style.width = `${newWidth}px`;
    img.style.height = `${newHeight}px`;
    
    // 注意：这里我们没有使用position: absolute;因为我们是直接在JavaScript中设置尺寸
    // 如果你需要保持图片在容器中的位置，可能需要添加额外的CSS样式
}

// 使用示例
resizeImage('imageContainer', 'myImage', 500); // 假设容器ID为'imageContainer'，图片ID为'myImage'，最大宽度为500px

但请注意，上述JavaScript示例中直接设置了图片的宽度和高度，这可能会在某些情况下导致图片不按预期缩放（特别是如果你没有正确地获取或设置原始尺寸）。在实际应用中，通常建议让CSS来处理图片的缩放，就像第一个HTML示例那样。JavaScript可以用于动态地调整容器尺寸或响应某些事件，但图片的缩放应尽可能通过CSS来实现。