Question

我想不断拍照，但似乎找不到相关的结果。例如，我有一个50px（宽度）乘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/

Answer 2

在此处查看演示：http://jsfiddle.net/jELqu/4/

使用<yourImg>.style.height和<yourImg>.style.width设置新值。

Answer 3

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

如果您想将图片重新调整为宽200像素和高300像素你可以这样做：

首先创建一个函数，让它命名为function scale(e)。这个功能会得到一个参数，您想要重新缩放的图像对象。

在该函数中，我们可以获取图片对象的style属性，并更改width和height，如下所示。

现在我们需要调用该函数并提供如下图像对象：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>

和函数本身：

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

动态更改图像大小

3 个答案: