Question

好的，这是问题所在。

我在div中有一个图像，这是它的CSS：

top: 420px; 
left: 517px;
position: absolute;
padding-top: 25px;
 height: 60px;
  width: 60px;

-webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
    transition: all 0.4s ease;

然后我有一个：为它悬停CSS，调整它的大小（以产生放大效果）

top: 415px;
left: 512px;
height: 75px;
width: 75px;

这样可以，但我的问题是：

我如何知道如何设置顶部和左侧属性以使图像从中心放大？我刚刚测试了几个数字，发现如果我将顶部和左侧属性减少5px，它会产生效果（从中心开始）。但是如何知道哪个值对它来说是完美的呢？如果我有一个更大的图像，顶部和左侧属性将是不同的。有没有办法计算这些数字？即使徽标看起来像是从中心缩放，我仍然怀疑它是否完全居中，如果我看得足够长。

希望你理解我的问题。

亲切的问候，迈克

Answer 1

如果我理解正确的问题，您希望在悬停时从图像中心均匀放大。那里的数学相当直接。您希望图像在顶部和底部以相同的数量向左和向右展开相同的数量。

如果旧图像有height = h，width = w，top = t，left = l。并且你放大到高度= h'，宽度= w'，我们可以用公式计算新的顶部（t'）和左边（l'）：

t' = t - ((h' - h) / 2)
l' = l - ((w' - w) / 2)

要解释发生了什么，请考虑身高。基本上我们正在考虑新高度和旧高度的差异，我们希望图片在顶部和底部都移动一半。因此我们可以除以2并从旧的顶部减去该数字以相应地移动它。

Answer 2

让我们做一点数学。您的图像在两个方向上从60px增长到75px。两个方向都是15px。如果我们将其除以2，我们得到每个方面增长的数量：7.5px。这就是你需要减少你的顶部和左边属性。

公式如下所示：（newSize-originalSize）/ 2

这是针对两个方向完成的。

这是展示此值的fiddle。这个小提琴有两个图像（所以悬停是挑剔的），以显示图像从中心增长。它有点偏，但这是因为CSS舍入十进制px测量值。没有参考图像，正在成长的人看起来从中心成长。最后，没有人，但你会知道。

最终CSS：

img {
    top: 120px; 
    left: 117px;
    position: absolute;
    padding-top: 25px;
    height: 60px;
    width: 60px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
img:hover{
    top: 112.5px;
    left: 109.5px;
    height: 75px;
    width: 75px;
}

图像从中心调整大小，左上角标记

2 个答案: