如何流畅/动态地调整图像大小答案

【问题标题】：How to resize an image fluidly/dynamically如何流畅/动态地调整图像大小
【发布时间】：2014-01-02 16:33:53
【问题描述】：

我正在尝试创建一个网站设计，其中有一个 3 x 3 的图像网格，每当我将鼠标放在特定图像上时，该图像的大小都会比其他图像稍大。不过，这种重新调整大小不应该立即发生；这将是一种流畅的动画，其中图像的高度和宽度每帧增加 x 个像素（同时保持纵横比），直到达到所需的大小。

我很确定这可以在 JQuery 中完成，但我似乎找不到它的命令。我能找到的最接近的是JQuery scale effect，但这会将图像缩小为空，而不是动态地将其大小增加到某个规定的最大值。

现在假设我得到了正确的实现，当鼠标悬停在图像上时，如何让脚本单独调整图像大小？到目前为止，我只能一次调整所有图像的大小，如果我给这 9 个图像中的每一个单独的 id，我不确定如何通过脚本解决这个问题。

【问题讨论】：

听起来可以只用 CSS 动画来完成。也就是说，你必须先尝试一些东西，然后再回来。没有代码，我们无法为您提供帮助。
看看这个 CSS3 解决方案是否适合你的目的； stackoverflow.com/questions/3620587/…

标签： javascript jquery html

【解决方案1】：

CSS 过渡是您所需要的。您可以调整更改的时间并使用它们为任何 CSS 属性设置动画。

当鼠标悬停在图像上时，以下代码将在 1 秒内将图像放大 1/5。

img {
    width: 200px;
    height: 150px;
    transition: width 1s;
    -webkit-transition: width 1s;
    transition: height 1s;
    -webkit-transition: height 1s;
}
img:hover{
    width: 240px;
    height: 180px;
}

这是一个粗略的fiddle 帮助您入门。

【讨论】：