html - 使用左上标签从中心调整图像大小

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;

然后我有一个 :hover CSS 来调整它的大小(以产生放大效果)

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

这工作正常，但我的问题是:

我怎么知道如何设置 top 和 left 属性使图像从中心放大？我刚刚测试了一些数字，发现如果我将 top 和 left 属性减少 5px，它会产生效果(从中心)。但是如何知道哪个值最适合它呢？如果我有一个更大的图像，top 和 left 属性将不同。有什么方法可以计算这些数字吗？即使 Logo 看起来像是从中心放大，如果我看得足够久，我仍然怀疑它是否完全居中。

希望你理解我的问题。

亲切的问候，迈克

Answer 1

如果我没理解错的话，你想在悬停时从图像中心均匀放大。那里的数学相当简单。您希望图像在顶部和底部扩展相同的量，在左右扩展相同的量。

如果旧图像有 height = h, width = w, top = t, left = l。而你放大到height=h',width=w'，我们就可以用公式计算新的top(t')和left(l'):

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

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