JS图片等比缩放

封面图 • 2026-01-08 • JavaScript

在 JavaScript 中实现图片的**等比缩放**（也叫**等比例缩放**或**保持宽高比缩放**），通常是指在调整图片大小时，保持图片的宽高比例不变，防止图片变形。

### 一、等比缩放原理

假设原始图片尺寸为 `originalWidth` × `originalHeight`，目标容器尺寸为 `targetWidth` × `targetHeight`。我们需要找到一个缩放比例，使得图片在不超出容器的前提下，尽可能大。

#### 公式：
- 缩放比例 = `Math.min(targetWidth / originalWidth, targetHeight / originalHeight)`

### 二、JS 实现方式

下面是一个简单的 JS 函数，用于计算图片的等比缩放后的尺寸：

```javascript
function getResizedSize(originalWidth, originalHeight, targetWidth, targetHeight) {
    const widthRatio = targetWidth / originalWidth;
    const heightRatio = targetHeight / originalHeight;
    const scale = Math.min(widthRatio, heightRatio);

const newWidth = originalWidth * scale;
    const newHeight = originalHeight * scale;

return { width: newWidth, height: newHeight };
}
```

### 三、使用示例

```javascript
const originalWidth = 800;
const originalHeight = 600;
const targetWidth = 400;
const targetHeight = 300;

const resized = getResizedSize(originalWidth, originalHeight, targetWidth, targetHeight);
console.log(resized); // { width: 400, height: 300 }
```

如果目标尺寸比原图小，会按比例缩小；如果目标尺寸比原图大，也会按比例缩放（不会放大）。

### 四、结合 HTML 和 CSS 使用

如果你是通过 `<img>` 标签展示图片，可以使用 CSS 的 `object-fit` 属性来实现等比缩放：

```html
<img src="your-image.jpg" style="width: 100%; height: 100%; object-fit: contain;" />
```

- `object-fit: contain`：等比缩放，保证图片完整显示在容器内。
- `object-fit: cover`：等比缩放，填充整个容器，可能会裁剪图片。

---

### 五、总结

| 方法 | 用途 |
|------|------|
| `getResizedSize()` | 计算图片等比缩放后的尺寸 |
| `object-fit: contain` | 在 HTML/CSS 中实现等比缩放 |
| `object-fit: cover` | 填充容器，可能裁剪 |

如果你有具体场景（比如用 Canvas 或 SVG 等），也可以告诉我，我可以提供更详细的实现方案。