加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

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编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读