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

Question

JavaScript或CSS中是否有选项可以调整图像大小以使图像生长？这样在鼠标悬停时图像的中心位置是相同的吗？

Answer 1

您需要能够水平和垂直居中图像。这可以使用包含display: table-cell，text-align: center和vertical-align: middle的图片上的包装div来完成，然后在:hover上的图像上应用一些额外的样式。

请参阅此小提琴以获取示例：http://jsfiddle.net/jblasco/6qVnB/

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

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

Answer 2

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

我使用Modernizr来确保我使用的CSS3效果在所有浏览器中都是一致的，即使它们不支持和用JavaScript编写它也适合您正在寻找的解决方案的范围。

我希望这会对你有所帮助。