温馨提示  2024年 6月我们已经停止开发者板块文章内容更新,谢谢来访。存档数据
知识 2023-08-26 34 次阅读

css3实现img等比例缩小的方法是什么

   

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视频教程)

的方法是什么