方法: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 缩放转换。
立即学习“前端免费学习笔记(深入)”;
示例如下:
Document @@##@@
@@##@@
输出结果:
京东商城详细页产品图片列表以及放大镜效果 兼容ie6+,谷歌,火狐 京东商城目前详细页正在使用的放大镜插件,效果很简单易用 图片采用绝对路径,这样方便懒人们使用 内容分为大图部分以及缩略图列表部分,可以分开使用
方法二,利用width和height属性
两个属性分别用于设置元素的宽度和高度。
示例如下
Document @@##@@
@@##@@
输出结果:
(学习视频分享:css视频教程)










