javascript - 动态改变图像大小

Question

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

我该如何做到这一点，是否可能(我猜是)？

这是基本代码:

HTML

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

CSS

div#container {
    width: 100%;
    height: 100%;
}

div.image {
    position:fixed;
}

Fiddle

Answer 1

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

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

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

演示:http://jsfiddle.net/jfriend00/bh94J/

---

如果你想让尺寸逐渐改变，你可以通过指定这个CSS来使用CSS3:

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

如本演示所示:http://jsfiddle.net/jfriend00/6YTmt/