在网页设计中，实现图片的放大缩小效果能够增强用户交互体验，吸引用户的注意力。而纯 CSS 就能轻松达成这一效果，下面就为大家介绍相关的方法与技巧。

利用 CSS 的 transform 属性是实现图片缩放的关键。transform 中的 scale() 函数可以改变元素的大小。例如，想要让图片在鼠标悬停时放大，只需编写简单的 CSS 代码：

img {
  transition: transform 0.3s ease; /* 添加过渡效果，让缩放更平滑 */
}

img:hover {
  transform: scale(1.2); /* 鼠标悬停时放大至 1.2 倍 */
}

在这段代码中，transition 属性设置了过渡效果，持续时间为 0.3 秒，过渡效果的速度曲线为 ease，使得图片的缩放过程自然流畅。当鼠标悬停在图片上时，transform: scale(1.2) 让图片放大到原来的 1.2 倍。

如果希望实现图片在水平或垂直方向上的单独缩放，可以使用 scaleX() 和 scaleY() 函数。比如，只想让图片在鼠标悬停时在水平方向上放大：

img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scaleX(1.5); /* 鼠标悬停时水平方向放大至 1.5 倍 */
}

另外，对于一些复杂的布局场景，我们可能需要固定图片的缩放中心。默认情况下，图片是以其中心为缩放点的，但可以通过 transform-origin 属性来改变这一点。例如，将缩放中心设置到图片的左上角：

img {
  transition: transform 0.3s ease;
  transform-origin: top left; /* 将缩放中心设置到左上角 */
}

img:hover {
  transform: scale(1.3);
}

通过调整 transform-origin 的值，如 top、left、bottom、right 以及具体的像素值或百分比，可以实现各种不同的缩放效果。

纯 CSS 实现图片放大缩小效果不仅简单方便，而且性能优越。掌握这些方法与技巧，能为网页设计增添更多的交互性和趣味性，提升用户体验，让你的网页在众多页面中脱颖而出。