如何在鼠标悬停时调整每个站点的图像大小？

Question

在JavaScript或CSS中是否有调整图像大小以使图像变大的选项？所以在鼠标悬停时图像的中心位置是相同的？

Answer 1

你需要能够水平和垂直居中图像。这可以使用带有display: table-cell、text-align: center和vertical-align: middle的图像上的包装器div，然后在:hover上对图像应用一些额外的样式。

有关示例，请参阅此小提琴：http://jsfiddle.net/jblasco/6qVnB/

或者，您可以手动确定一些页边距或position: relative和top的组合，以在悬停时重新定位图像，而不是使用display: table-cell。

使用此解决方案的示例：http://jsfiddle.net/jblasco/fvqzR/2/

Answer 2

为了获得平滑的效果，我建议将CSS3 transitions and transformations (see the section "2. Animating your Transforms"与Modernizr相结合，这将允许图像逐渐增长，并提供比直接的hover更优雅的效果。

我使用JavaScript来确保我使用的CSS3效果可以在所有浏览器上保持一致，即使它们不支持，并且是用JavaScript编写的，它也符合您正在寻找的解决方案的范围。

我希望这对你有帮助。