通过JS,按照原比例控制图片尺寸
时间: 2023-08-12 16:13:24 浏览: 42
可以通过以下JS代码按照原比例控制图片尺寸:
```javascript
// 获取图片元素
var img = document.getElementById("myImage");
// 获取图片原始宽度和高度
var width = img.naturalWidth;
var height = img.naturalHeight;
// 控制图片尺寸
if (width > height) {
img.style.width = "100%";
img.style.height = "auto";
} else {
img.style.height = "100%";
img.style.width = "auto";
}
```
在上面的代码中,我们首先获取图片元素并获取其原始宽度和高度。然后,我们根据图片宽高比例来控制图片尺寸,使其在保持原比例的情况下适应其容器。如果图片宽度大于高度,则将图片宽度设置为100%,高度设置为自动;否则将图片高度设置为100%,宽度设置为自动。
相关问题
js事件点击图片控制图片旋转
可以使用JavaScript来实现点击图片事件控制图片旋转。以下是一个简单的示例代码:
HTML代码:
```
<img id="myImage" src="image.jpg" onclick="rotateImage()">
```
JavaScript代码:
```
function rotateImage() {
var image = document.getElementById("myImage");
var currentRotation = parseInt(image.style.transform.replace("rotate(", "").replace("deg)", ""));
var newRotation = currentRotation + 90;
image.style.transform = "rotate(" + newRotation + "deg)";
}
```
代码解释:
1. HTML代码中的<img>元素表示要旋转的图片,通过onclick事件绑定了rotateImage()函数。
2. JavaScript代码中的rotateImage()函数表示点击图片后要执行的操作。
3. 首先获取图片元素和当前的旋转角度。
4. 计算新的旋转角度(每次旋转90度)。
5. 将新的旋转角度应用到图片元素的transform属性中。
这样,每次点击图片,图片就会顺时针旋转90度。
js实现鼠标滚轮控制图片缩放效果的代码
可以使用以下代码实现鼠标滚轮控制图片缩放效果:
```javascript
// 获取图片元素
var img = document.getElementById("myImg");
// 设置初始缩放比例
var scale = 1;
// 监听鼠标滚轮事件
img.addEventListener("wheel", function(e) {
e.preventDefault(); // 阻止页面滚动
var delta = e.deltaY || e.detail || e.wheelDelta;
// 根据滚轮方向计算缩放比例
if (delta > 0) {
scale -= 0.1;
} else {
scale += 0.1;
}
// 设置缩放样式
img.style.transform = "scale(" + scale + ")";
});
```
在上述代码中,我们首先获取了要操作的图片元素,然后设置了初始的缩放比例为1。接着,我们监听了鼠标滚轮事件,通过判断滚轮方向来计算缩放比例。最后,我们设置了缩放样式,将缩放比例应用到图片元素上。