用CSS3中的transfrom:scale{x,y}来放大，如下：
<style>
*{margin:0padding:0}
div{border:solid 1px #333width:40pxheight:40px}
div img{width:40pxheight:40pxtransition:all 0.3s}
div img:hover{transfrom:scale{2,2}}//从中心放大两部
</style>
<div><img src="图片地址" alt=""/></div>
扩展资料：注意事项
transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)
1、移动.左移右移或者上移下移:
CGAffineTransformMakeTranslation(X偏移量, Y偏移量)
CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量)
2、改变大小(形变):
CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数)
CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数)
.imgDiv{
width:500px
height:500px
background-image:url('../images/index.jpg')
-moz-background-size: 100% 100%
-o-background-size: 100% 100%
-webkit-background-size: 100% 100%
background-size: 100% 100%
-moz-border-image: url(./btn.png) 0
background-repeat:no-repeat\9
background-image:none\9
（此处空一行）
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')\9
}
扩展资料：css控制背景图片自动伸缩自适应的小技巧
例子如下：
.picLUp{
background:url(logo.png) no-repeat
width:100%height:40%
background-size:100% 100%
}
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled:
可选项，布尔值(Boolean)，设置或检索滤镜是否激活。true | false
true:
默认值，滤镜激活。
false:
滤镜被禁止。
sizingMethod:
可选项，字符串(String)，设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
就是将多个小图片合成一张大图片，通过css截取不同部位的区域子图片。
如（这些都是宽为16px的图片，通过css：background-position去截取，这样很多个小图片就合成了一张大图片，减少了http访问次数，还能在一定程度上减小总图片大小）：
