如何在鼠标悬停时调整图像大小以适应每个站点？
JavaScript 或 CSS 中是否有选项可以调整图像大小以使图像变大？这样鼠标悬停时图像的中心位置是相同的吗？
Is there a option in JavaScript or CSS to resize a image so that the image is growing out? So that the centerposition of the image is the same on mouseover?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要能够使图像水平和垂直居中。这可以通过使用图像上的包装 div 以及
display: table-cell、text-align: center和vertical-align: middle来完成>，然后对:hover上的图像应用一些额外的样式。请参阅此小提琴的示例： http://jsfiddle.net/jblasco/6qVnB/
可选地，而不是与使用
display: table-cell相比，您可以手动找出一些边距或position:relative和top的组合来重新定位图像徘徊。使用此解决方案的示例： http://jsfiddle.net/jblasco/fvqzR/2/
You'll need to able to center the image horizontally and vertically. This can be done using a wrapper div on the image with
display: table-cell,text-align: center, andvertical-align: middle, and then applying some extra styles to the image on:hover.See this fiddle for an example: http://jsfiddle.net/jblasco/6qVnB/
Optionally, rather than using
display: table-cell, you could manually figure out some margins or a combination ofposition: relativeandtopto reposition the image on hover.Example using this solution: http://jsfiddle.net/jblasco/fvqzR/2/
为了获得平滑的效果，我建议合并 CSS3 过渡和转换（请参阅“ 2. 动画变换” 与 Modernizr 相结合，这将使图像逐渐生长并给出比一个更优雅的效果直接
hover我使用 Modernizr 来确保我使用的 CSS3 效果在所有浏览器中保持一致，即使它们不支持并且是用 JavaScript 编写的，它也适合您的解决方案的范围。我正在寻找，
希望这对你有帮助。
For a smooth effect I recommend incorporating CSS3 transitions and transformations (see the section "2. Animating your Transforms" combined with Modernizr, this will allow an image to grow gradually and give a much more elegant effect than a straight forward
hover.I use Modernizr to ensure that the CSS3 effects I use can be consistent across all browsers to even if they don't support and being written in JavaScript it fits within the scope of the solution you're looking for.
I hope this helps you.