css怎么放大图片

html-css08

css怎么放大图片,第1张

transform: scale()

-ms-transform: scale()/* IE 9 */

-webkit-transform: scale()/* Safari and Chrome */

括号里面填你想放大的数值,小于1为缩小,大于1为放大,1为原图

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例:

用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的基础上-一般为自身,宽缩放的倍数,高缩放的倍数)