在网页设计中，经常需要使用图片进行布局和装饰，而 CSS 可以帮助我们实现对图片的缩放操作。通过 CSS，我们可以很容易地让图片在用户交互下放大或缩小，下面就让我们一起来看看如何使用 CSS 实现图片的放大变小操作：

img:hover {
transform: scale(1.2); 
/* 鼠标悬浮在图片上，将其放大到原尺寸的 1.2 倍 */
transition: transform 0.5s ease-out;
/* 过度时间为 0.5 秒，过度的速度为 ease-out */
}
img:active {
transform: scale(0.8);
/* 当用户点击时，将图片缩小到原尺寸的 0.8 倍 */
transition: transform 0.2s ease-out;
/* 过度时间为 0.2 秒，过度的速度为 ease-out */
}

我们可以通过:hover和:active伪类来控制图片的放大和缩小效果，同时过度效果可以通过transition属性来实现，过度速度也可以选择合适的参数进行调整。

此外，还可以通过transform-origin属性来实现旋转或者缩放中心点的变更，例如：

img:hover {
transform: scale(1.2);
transform-origin: center top;
/* 鼠标悬浮在图片上，将其在顶部中心点放大到原尺寸的 1.2 倍 */
transition: transform 0.5s ease-out;
/* 过度时间为 0.5 秒，过度的速度为 ease-out */
}

使用 CSS 进行图片的缩放操作非常方便，而且可以充分利用用户交互来提高用户体验，如果你正在进行网页设计的工作，那么这个功能一定要留在你的工具箱里。