缩放利用值:

scaleY(n):对高度进行缩n倍的缩放

scaleX(n):对宽度进行缩放,n指的是缩放比例

html如何固定图片大小html页面中css缩放图片的办法 AJAX

scale(n):对整体高度和宽度进行缩放,n为缩放的比例,为数字

示例代码

transform: scale(2)css图片宽度缩放

scaleX():可以对元素(图片)的宽度进行缩放,以下代码是将原来的图片的宽度放大了2倍。

示列代码:

<div class=\"大众divimg\公众> <img src=\公众biao.png\"大众 > <br/> <!--宽度缩放--> <img src=\"大众biao.png\公众 style=\公众transform:scaleX(2);\公众></div>

运行结果:

css图片高度缩放

scaleY():可以对元素的高度进行缩放,以下示例把原图片的高放大了2倍

示例代码:

<div class=\公众divimg\"大众> <img src=\公众biao.png\"大众 style=\"大众margin: 5px;\"大众 > <!--对高度进行缩放操作--> <img src=\公众biao.png\"大众 style=\"大众transform:scaleY(2);\"大众></div>

运行结果:

css图片等比例缩放

scale(n):可以对元素的整体进行缩放,可以填入 X Y值,也可以填写一个值

示例代码:

<img src=\"大众biao.png\公众 style=\"大众margin: 5px;\公众 ><br/><br /><!--对全局进行缩放操作--><img src=\"大众biao.png\"大众 style=\"大众transform:scale(2,2);margin-left: 30px;\公众>

运行结果:

案例:鼠标划过,图片等比例缩放

示例代码:

<head> <meta charset=\"大众UTF-8\公众> <title>Document</title></head><style> .divimg{ width: 270px; height: 180px; overflow: hidden; } .divimg:hover img{ -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); }</style><body> <div class=\"大众divimg\公众> <img src=\"大众https://www.feiniaomy.com/zb_users/upload/2019/08/201908301567161510836571.jpg\"大众 > </div></body></html>

运行结果: