动态改变图像尺寸

我想不断地拍照，但似乎无法找到相关结果。例如，我有一个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

来源

2013-10-27 PMint

要则会立即改变其大小，只需将支持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/

来源

2013-10-27 08:00:24 jfriend00

似乎不工作，http://jsfiddle.net/jELqu/1/ – PMint

@PMint - 似乎对我很好。你期望看到你没有看到什么。 – jfriend00

它不会经常改变大小，即每0.1秒大小降低1个像素。另外，如果OP不清楚，难以解释，我很抱歉。 – PMint

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

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

来源

2013-10-27 08:15:29 Sanjay

好吧，现在我希望没有按钮，而不是从50x100到100x200，而是从50x100到51x102到52x104等。 – PMint

@PMint：您应该使用该代码作为绑定到任何事件的回调，例如：在图像悬停时，请阅读浏览器DOM事件的文档，以及如何处理这些事件。 – Sanjay

你可以调用一个函数来进行缩放。例如：

，如果你想重新大小的图片为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"; 
}

来源

2013-10-27 08:17:21 MaD

动态改变图像尺寸

回答

相关问题