css中,可利用transform属性配合scale()函数实现img元素等比例缩小,transform属性允许设置元素的缩放操作,scale()函数用于定义元素的缩放转换,语法为“img{transform:scale(缩放比例);}”。
本教程操作环境windows10系统、css3&&html5版、dell g3电脑。
css3实现img等比例缩小
在css中,想如果要实现img元素的等比例缩小,需要利用到transform属性配合scale()函数实现。
transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
scale()函数用于定义元素的缩放变换。
scale()函数函数内的值就是元素的缩放比例。
示例如下
<!doctype html><html lang=en><head> <meta charset=utf-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=x-ua-compatible content=ie=edge> <title>document</title> <style> .img1{ transform:scale(0.5); } </style></head><body> <img src=1118.02.png class=img1> <p>上面是等比例缩小的,下面是原比例</p> <img src=1118.02.png ></body></html>输出结果
(学习视频分享css视频教程)
的方法是什么