2

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

我将如何做到这一点，是否有可能（我猜是这样）？

这是基本代码：

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;
}

小提琴

4

3 回答 3

2

要立即更改大小，您可以使用 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-27T08:00:24.627 回答
0

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

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

于 2013-10-27T08:15:29.157 回答
0

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

如果您想将图片的大小重新调整为 200 像素的宽度和 300 像素的高度，您可以执行以下操作：

首先创建一个函数，我们给它命名function scale(e)。此函数将获取一个参数，该参数是您要重新缩放的图像对象。

在函数中，我们可以获取style图像对象的属性并更改widthand 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-27T08:17:21.310 回答