js中根据指定高度对图片进行等比例缩放
时间: 2024-03-01 14:52:49 浏览: 23
根据指定高度对图片进行等比例缩放可以通过计算图片的宽高比来实现。
假设我们要把一张图片缩放到指定高度 `height`,可以按照以下步骤进行操作:
1. 创建一个图片对象并加载图片:
```javascript
var img = new Image();
img.src = 'image.jpg';
```
2. 等待图片加载完成:
```javascript
img.onload = function() {
// 在这里进行缩放操作
};
```
3. 计算图片的宽高比:
```javascript
var aspectRatio = img.width / img.height;
```
4. 根据宽高比计算图片的新宽度:
```javascript
var newWidth = height * aspectRatio;
```
5. 设置图片的新宽度和高度:
```javascript
img.width = newWidth;
img.height = height;
```
完整的代码如下:
```javascript
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
var height = 200; // 指定缩放后的高度
var aspectRatio = img.width / img.height; // 计算宽高比
var newWidth = height * aspectRatio; // 计算新宽度
img.width = newWidth; // 设置新宽度
img.height = height; // 设置新高度
document.body.appendChild(img); // 将缩放后的图片添加到页面中
};
```
需要注意的是,如果图片的宽度小于计算得到的新宽度,那么图片的宽度就不会被放大,仍然保持原始宽度。如果需要强制放大图片,可以在计算新宽度时增加一个放大系数,例如 `var newWidth = height * aspectRatio * 1.5;`。