在網頁設計中，經常需要使用圖片進行布局和裝飾，而 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 進行圖片的縮放操作非常方便，而且可以充分利用用戶交互來提高用戶體驗，如果你正在進行網頁設計的工作，那么這個功能一定要留在你的工具箱里。