web前端图片等比缩放

Web前端图片等比缩放通常是指当图片尺寸需要适应不同的屏幕大小或者容器尺寸变化时，保持图片的长宽比例不变而调整实际大小的技术。这种技术常见于响应式设计中，目的是保证图片在各种设备上看起来既美观又不失真。

常见的做法有以下几种：

1. **CSS 宽度设置**：使用 `max-width: 100%;` 和 `height: auto;` 来让图片宽度自适应容器宽度，高度会自动保持原始比例。

img {
   max-width: 100%;
   height: auto;
}

2. **CSS background-image**：对于背景图片可以使用 `background-size: cover` 或 `contain`，前者会填充整个容器并保持原图的比例，后者则会保持图像内容完整，不会拉伸。

div {
   background-image: url('image.jpg');
   background-size: cover; /* 或 contain */
}

3. **JavaScript 图片处理**：如果需要动态计算缩放比例，可以使用 JavaScript 对图片元素的 width 和 height 进行操作。

function scaleImage(imgElement, maxWidth) {
    let naturalWidth = imgElement.naturalWidth;
    let naturalHeight = imgElement.naturalHeight;
    let aspectRatio = naturalWidth / naturalHeight;

    if (naturalWidth > maxWidth) {
        imgElement.style.height = 'auto';
        imgElement.style.width = maxWidth + 'px';
        imgElement.style.maxHeight = (maxWidth / aspectRatio) + 'px'; // 保持比例
    } else {
        imgElement.style.width = '100%';
    }
}