CSS中img图片如何实现等比例缩小的效果?
发布时间:2022-04-11 16:59:57 所属栏目:语言 来源:互联网
导读:CSS中img图片怎样实现等比例缩小的效果?有时候我们上传的图片太大了想要对img图片进行缩小,而CSS中,我们使用transform属性配合scale()函数就可以实现等比例缩小的效果,下面我们就来看看具体是怎样实现的。 本教程操作环境:windows10系统、CSS3HTML5版、
CSS中img图片怎样实现等比例缩小的效果?有时候我们上传的图片太大了想要对img图片进行缩小,而CSS中,我们使用transform属性配合scale()函数就可以实现等比例缩小的效果,下面我们就来看看具体是怎样实现的。 本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。 在css中,想要实现img元素的等比例缩小,需要利用到transform属性配合scale()函数实现。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 scale()函数用于定义元素的缩放变换。 scale()函数函数内的值就是元素的缩放比例。 示例如下: <!DOCTYPE html> <html lang="en"> } </style> </head> <body> <img src="1118.02.png" class="img1"> <p>上面是等比例缩小的,下面是原比例</p> <img src="1118.02.png" > </body> </html> (编辑:PHP编程网 - 黄冈站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |