JS自动缩小超出大小的图片

在JavaScript中，自动缩小超出特定大小（例如宽度或高度）的图片，通常可以在图片加载后通过JavaScript动态调整其尺寸。这里提供一个基本的示例，该示例会在图片加载后检查其尺寸，如果图片宽度或高度超出了预设的最大值，则按比例调整其大小。

HTML部分（假设你有一个`img`标签，并给它一个ID以便JavaScript操作）：

<img id="myImage" src="your-image-url.jpg" alt="Sample Image">

JavaScript部分：

window.onload = function() {
    // 获取图片元素
    var img = document.getElementById('myImage');

    // 设置最大宽度和高度
    var maxWidth = 800; // 假设最大宽度为800px
    var maxHeight = 600; // 假设最大高度为600px

    // 图片加载完成后执行
    img.onload = function() {
        // 检查原始宽度和高度
        var width = img.width;
        var height = img.height;

        // 如果图片宽度或高度超出限制
        if (width > maxWidth || height > maxHeight) {
            // 计算新的宽度和高度
            if (width > height) {
                // 宽度更重要，调整宽度
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                // 高度更重要，调整高度
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }

            // 应用新的尺寸
            img.style.width = width + 'px';
            img.style.height = height + 'px';
        }
    };

    // 如果图片已经在缓存中，可能需要手动触发onload
    if (img.complete) {
        img.onload();
    }
};

这段代码首先设置了图片的最大宽度和高度。然后，它等待图片加载完成（包括从缓存中加载的情况）。一旦图片加载完成，它会检查图片的原始尺寸，并根据需要调整其大小，以确保它不会超过设置的最大宽度或高度。注意，这里使用了简单的比例计算来保持图片的宽高比不变。