如何用CSS3实现对图片的放大效果

魁首哥

作者

如何用CSS3实现对图片的放大效果

这篇文章主要讲解了“如何用CSS3实现对图片的放大效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用CSS3实现对图片的放大效果”吧！

方法：1、利用transform属性配合scale()方法，语法为“transform:scale(x轴放大倍数,y轴放大倍数);”；2、利用width和height属性，语法为“width:放大后宽度;height:放大后高度;”。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

怎么用CSS3实现对图片的放大效果

方法一，利用transform属性配合scale()方法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

scale(x,y) 定义 2D 缩放转换。

示例如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>*{margin:0auto;}.img1{background:pink;transform:scale(1.5,1.5);}</style></head><body><imgsrc="1115.08.png"class="img1"><br><br><imgsrc="1115.08.png"class="img2"></body></html>

输出结果：

方法二，利用width和height属性

两个属性分别用于设置元素的宽度和高度。

示例如下

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>*{margin:0auto;}.img1{width:300px;height:200px;}</style></head><body><imgsrc="1115.08.png"class="img1"><br><br><imgsrc="1115.08.png"class="img2"></body></html>

输出结果：