CSS实现图片放大缩小的几种方法

实现图片放大和缩小可以通过以下几种方法：

1. 使用CSS的transform属性中的scale函数。
2. 使用CSS的width和height属性进行控制。
3. 使用Javascript或Jquery进行控制。

下面是具体的实现方法和代码示例：

1. 使用CSS的transform属性中的scale函数：

CSS代码：

.img-scale {
  transition: transform 0.3s ease;
}
 
.img-scale:hover {
  transform: scale(1.2);
}

HTML代码：

<img src="image.jpg" class="img-scale" alt="Image">

2. 使用CSS的width和height属性进行控制：

CSS代码：

.img-resize {
  transition: width 0.3s ease, height 0.3s ease;
}
 
.img-resize:hover {
  width: 200px;
  height: 200px;
}

HTML代码：

<img src="image.jpg" class="img-resize" alt="Image">

3. 使用Javascript或Jquery进行控制：

HTML代码：

<img id="myImage" src="image.jpg" alt="Image">
<button onclick="resizeImage(1.2)">放大图片</button>
<button onclick="resizeImage(0.8)">缩小图片</button>

Javascript或Jquery代码：

function resizeImage(scale) {
  var img = document.getElementById('myImage');
  var width = img.clientWidth * scale;
  var height = img.clientHeight * scale;
  img.style.width = width + 'px';
  img.style.height = height + 'px';
}

以上就是实现图片放大和缩小的几种方法，你可以根据具体需求选择合适的方法。