注:div宽高与img宽高均需设置,并且img图片需设置宽高与div盒子宽高相同。如果图片设置宽高小于div盒子的宽高,则会涌现img盒子整体放大的效果,而不是只是图片本身的放大;若图片设置图片宽高大于div盒子的宽高,则会涌现图片显示不完全的情形。详细代码及效果如下图所示:
利用hover+scale+transition实现图片放大代码示例
img宽高档于div宽高时的缩放效果图
img宽高小于div宽高时的缩放效果图
img宽高大于div宽高时的缩放效果图
仅以此作为学习条记以及分享,如有需改进或者欠妥之处,请多多指教。
1+0.01=1.01
1-0.01=0.99