Javascript 动态更改图像大小

我想不断地拍一张照片，但似乎找不到相关的结果。 例如，我有一张50px（宽度）乘以100px（高度）的图片，我想将宽度从25px更改为100px，将高度从50px更改为200px（因此图像保持宽度除以高度）

我将如何做到这一点，这是可能的（我想是的）

以下是基本代码：

HTML

---

要立即更改大小，只需使用javascript设置CSS样式：

var img = document.querySelectorAll("#container .image img")[0];

img.style.height = "200px";
img.style.width = "100px";

演示：

---

如果希望大小逐渐改变，也可以通过指定以下CSS来使用CSS3：

.image img {
   -moz-transition: height 3s, width 3s;
    -webkit-transition: height 3s, width 3s;
    transition:  height 3s, width 3s;
}

如本演示所示：

请参见此处的演示：

---

使用

.style.height

和

.style.width

设置新值。

可以调用函数进行缩放。 例如：

如果要将图片的大小重新调整为200像素的宽度和300像素的高度 你可以这样做：

首先创建一个函数，我们将其命名为

functionscale（e）

。此函数将获得一个 参数，该参数是要重新缩放的图像对象

在函数中，我们可以获得图像对象的

样式

属性，并更改

宽度

和

高度

，如下所示

现在我们需要调用函数并提供如下图像对象：

onclick=“scale（this）；”

完整代码：

<div id="container">
<div class="image" ><img src="http://libcom.org/files/images/library/black-square.jpg" width="50px" height="100px" onclick="scale(this);"/></div>

---

@PMint-对我来说似乎工作得很好。您希望看到的是您没有看到的内容。它不会不断改变大小，即每0.1秒大小降低1个像素。另外，如果OP不清楚，很难解释，我也很抱歉。@PMint-在您的问题中，您要求的是不断变化的尺码吗？我看不出来。您可以使用

setInterval（）

每隔几毫秒应用一个小更改，或者使用CSS动画/转换。请澄清你的问题。不清楚您想要什么。@PMint-这里有一个版本使用CSS3转换进行逐步更改：@PMint-在我的答案中添加了一个版本，该版本逐渐更改大小。不确定您在问题中真正想问什么。好的，现在我希望不使用按钮，而不仅仅是从50x100到100x200，而是从50x100到51x102到52x104等等。@PMint：您应该将该代码用作绑定到任何事件的回调，例如：在图像悬停时，请阅读浏览器DOM事件的文档，以及如何处理这些事件。

.image img {
   -moz-transition: height 3s, width 3s;
    -webkit-transition: height 3s, width 3s;
    transition:  height 3s, width 3s;
}

<div id="container">
<div class="image" ><img src="http://libcom.org/files/images/library/black-square.jpg" width="50px" height="100px" onclick="scale(this);"/></div>

function scale(e) {
   e.style.width="200px";
   e.style.height="300px";
}