注:div宽高与img宽高均需设置,并且img图片需设置宽高与div盒子宽高相同。
如果图片设置宽高小于div盒子的宽高,则会涌现img盒子整体放大的效果,而不是只是图片本身的放大;若图片设置图片宽高大于div盒子的宽高,则会涌现图片显示不完全的情形。
详细代码及效果如下图所示:

利用hover+scale+transition实现图片放大代码示例

img宽高档于div宽高时的缩放效果图

html鼠标移动图片放大CSS3实现鼠标滑动图片缩放后果 Python

img宽高小于div宽高时的缩放效果图

img宽高大于div宽高时的缩放效果图

仅以此作为学习条记以及分享,如有需改进或者欠妥之处,请多多指教。

1+0.01=1.01

1-0.01=0.99